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模块

ngStorage模块

ngStorage

推荐阅读更多精彩内容