ngStorage模块
2017-08-24 本文已影响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>
