2

在下面的ExampleController函数中，将一个值输入到消息变量本地存储中。第一次值被存储，但再次输入时值没有被存储。当浏览器缓存被清除时，值会再次被存储，第二次没有值被存储。

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>
4

1 回答 1

0

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

问候，

于 2015-01-09T16:24:31.707 回答