Question

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

Mystorage.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>

NextStorage.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>

Answer 1

你应该以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。

此致

在localstorage angularjs中获取未定义的值

1 个答案: