在本地存储 AngularJS 中获取未定义的值

在下面的ExamppleController函数中，将一个值输入到消息变量本地存储中。第一次存储值，但再次输入时不存储值。清除浏览器缓存后，将再次存储值，第二次不存储任何值。

我的存储.html

<html>
    <head>
        <script src="angular.min.js"></script>
        <script src="ngStorage.min.js"></script>
        <script>
            var example = angular.module("example", ["ngStorage"]);
            example.controller("ExampleController", function($scope,$rootScope,$window,$localStorage,$location) {     
            $scope.save = function() {
                $rootScope.newq=$scope.name;
                $scope.$apply();
                **$localStorage.message = $scope.name;**
                console.debug($localStorage.message);
                $window.location.href = 'nextstorage.html';
            }                           
        });
        </script>
    </head>
    <body ng-app="example">
        <div ng-controller="ExampleController">
        <input type="text" ng-model="name"/>
            <button ng-click="save()">Save</button>               
            <br>
            {{data}}
        </div>
    </body>
</html>

下一页存储.html

<html>
    <head>
        <script src="angular.min.js"></script>
        <script src="ngStorage.min.js"></script>
        <script>
            var example = angular.module("example", ["ngStorage"]);
            example.controller("ExampleController", function($scope,$window,$localStorage,$location) {              
                    $scope.data1 = $localStorage.message;               
            });
        </script>
    </head>
    <body ng-app="example">
        <div ng-controller="ExampleController">
        <span>{{data1}}</span>

        </div>
    </body>
</html>

你真的应该以AngularJS的方式做事。我认为这就是脱节发生的地方。

请参阅以下代码：

<html>
    <head>
        <script src="angular.min.js"></script>
        <script src="ngStorage.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
        <script>
            var example = angular.module("example", ["ngStorage", "ui.router"]);
            example.config(function($stateProvider, $urlRouterProvider) {
                $stateProvider
                .state('1', {
                    url: '/1',
                    templateUrl: 'templates/1.html',
                    controller: 'FirstController'
                })
                .state('2', {
                    url: '/2',
                    templateUrl: 'templates/2.html',
                    controller: 'SecondController'
                });
                $urlRouterProvider.otherwise('/1');
            });
            example.controller("FirstController", function($scope,$localStorage,$location) {
                $scope.save = function() {
                    $localStorage.message = $scope.name;
                    $location.path("/2");
                }
            });
            example.controller("SecondController", function($scope,$localStorage,$location) {
                $scope.data1 = $localStorage.message;
            });
        </script>
    </head>
    <body ng-app="example">
        <div ui-view></div>
        <script id="templates/1.html" type="text/ng-template">
            <div>
                <input type="text" ng-model="name"/>
                <button ng-click="save()">Save</button>
                <br>
            </div>
        </script>
        <script id="templates/2.html" type="text/ng-template">
            <div>
                <span>{{data1}}</span>
            </div>
        </script>
    </body>
</html>

您会注意到我正在使用路由并使用 $location 提供程序在它们之间导航。以这种方式执行此操作时，$localStorage工作正常。

在ui-router或ngRoute上阅读。

问候

相关内容

最新更新

热门标签：