ngStorage模块

作者: 大乔是个美少女 | 来源:发表于2017-08-24 12:22 被阅读36次

    ngStorage

    ngStorage是angularJS的一个模块,包括 $localStorage 和 $sessionStorage 两个服务。
    用法
    1.加载 js 文件,ngStorage.min.js;
    2.依赖注入 angular.module('app',['ngStorage'])
    3.使用 $localStorage、$sessionStorage 方法。

    ## 读写方法:
    <!DOCTYPE html>
    <html ng-app="app">
      <head>
        <script data-require="angular.js@1.1.5" datasemver="1.1.5"=src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
        <script>
          angular.module('app', [ 'ngStorage']).controller('Ctrl', function($scope, $localStorage ){
            ## 设置默认值
            $scope.$storage = $localStorage.$default({
              x: 42
            });
            ## 删除方法:$storage存储的是localstorage的json对象
            $scope.deleteX = function() {
              delete $scope.$storage.x;
            };
            
            $scope.deleteY = function() {
              delete $localStorage.y;
            };
          });
          });
        </script>
      </head>
    
      <body ng-controller="Ctrl">
        <button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}}
        <button ng-click="deleteX()">Delete $scope.$storage.x</button> | <button ng-click="deleteY()">Delete $localStorage.y</button>
        ## 清空localstorage 内的所有缓存
        <button ng-click="$storage.$reset({ x: 999 })">Clear localStorage</button>
      </body>
    </html>
    
    ## 替换方法:监听$localstorage的变化
    <!DOCTYPE html>
    <html ng-app="app">
      <head>
        <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
        <script>
          angular.module('app', [ 'ngStorage' ]).controller('Ctrl', function($scope, $localStorage){
            $scope.x = $localStorage.x || 42;
            $scope.y = $localStorage.y;
            
            $scope.$watch('[x, y]', function() {
                $localStorage.x = $scope.x;
                $localStorage.y = $scope.y;
            }, true);
            
            $scope.$watch(function() {return angular.toJson($localStorage); }, function() {
                $scope.x = $localStorage.x;
                $scope.y = $localStorage.y;
            });
          });
        </script>
      </head>
    
      <body ng-controller="Ctrl">
        <button ng-click="x = x + 1">{{x}}</button> + <button ng-click="y = y + 1">{{y}}</button> = {{x + y}}
      </body>
    </html>
    

    你可以在ngstorage里存储各种东西,但是要保证可以被格式化为 JSON格式:
    1、Infinity, NaN 将会被替换成 null。
    2、undefined, Function 将会被移除。

    ## 测试以下代码看看H5的localstorage支持什么类型的格式存储。
    <!DOCTYPE html>
    <html ng-app="app">
      <head>
        <script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
        <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
        <script>
          angular.module('app', ['ngStorage']).controller('Ctrl', function($scope, $localStorage){
            $scope.$storage = $localStorage;
            
            $scope.addJunk = function() {
              $localStorage.junk = {
                string: 'I\'m a string!',
                number: 123e-5,
                float: 1.23456789 - (1.23456789 % 0.2),
                boolean: true,
                object: {
                  array: [ [0], ['1', '2'] ]
                },
                null: null,
                infinity: Infinity,
                nan: NaN,
                undefined: undefined,
                function: function() {
                    return false;
                }
              };
            };
          });
        </script>
      </head>
      
      <body ng-controller="Ctrl">
        <button ng-click="addJunk()">Add Junk</button>
        <div>{{$storage.junk}}</div>
      </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:ngStorage模块

        本文链接:https://www.haomeiwen.com/subject/vcvsdxtx.html