1. 实现效果
b.查询
c.关闭应用后再次查询，（发现数据消失）
2. 代码实现
a.调用页面
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1"> 4 <title>数据存储方式</title> 5 <script type="text/javascript" src="js/angular.min.js"></script> 6 <script type="text/javascript" src="js/angular-route.min.js"></script> 7 <script type="text/javascript" src="js/ypf.js"></script> 8 <script type="text/javascript" src="js/myapp.js"></script> 9 <script> 10 </script> 11 </head> 12 <body ng-app="myApp"> 13 <ul> 14 <li> 15 <a href="#/1">1.Cache存储方式</a> 16 </li> 17 <li> 18 <a href="#/2">2.Cookie存储方式</a> 19 </li> 20 <li> 21 <a href="#/3">3.localStorage的存储方式</a> 22 </li> 23 <li> 24 <a href="#/4">4.SessionStorage的存储方式</a> 25 </li> 26 <li> 27 <a href="#/5"></a> 28 </li> 29 </ul> 30 <!--SPA模式用来存储子页面的--> 31 <div ng-view></div> 32 </body>
b.子页面
1 <div ng-controller="MyCache"> 2 <p>{{name}}</p> 3 <p><input type="text" placeholder="请输入您要测试的Cache内容" ng-model="testContent" /></p> 4 <p> 5 <input type="button" value="增加" ng-click="AddCache()" /> 6 <input type="button" value="删除" ng-click="DeleteCache()" /> 7 <input type="button" value="修改" ng-click="EditCache()" /> 8 <input type="button" value="查询" ng-click="SerachCache()" /> 9 10 </p> 11 <p>双向数据绑定：{{testContent}}</p> 12 <p>结果：{{testResult}}</p> 13 14 </div>
c. Angular.js实现页面
//1.Cache页面对应的控制器 moudle.controller('MyCache', ['$scope', function($scope) { $scope.name = "下面是Cache的测试:"; $scope.testContent = ""; $scope.testResult = ""; //增加 $scope.AddCache = function() { var ff = $scope.testContent; $$.cache.add('testData', ff); $scope.testResult = "增加成功"; }; //删除 $scope.DeleteCache = function() { $$.cache.delete('testData'); $scope.testResult = "删除成功"; }; //修改 $scope.EditCache = function() { var ff = $scope.testContent; $$.cache.update('testData', ff); $scope.testResult = "修改成功"; }; //查询 $scope.SerachCache = function() { var testData = $$.cache.get('testData'); $scope.testResult = "查询出来的数据为：" + testData; }; }]);
d. 数据存储方法封装
1 var $$ = function() {}; 2 //1.缓存框架 - 内存篇 3 $$.cache = { 4 data: [], 5 get: function(key) { 6 var value = null; 7 for(var i = 0, len = this.data.length; i < len; i++) { 8 var item = this.data[i] 9 if(key == item.key) { 10 value = item.value; 11 } 12 } 13 return value; 14 }, 15 add: function(key, value) { 16 var json = { 17 key: key, 18 value: value 19 }; 20 this.data.push(json); 21 }, 22 delete: function(key) { 23 var status = false; 24 for(var i = 0, len = this.data.length; i < len; i++) { 25 var item = this.data[i] 26 // 循环数组元素 27 if(item.key.trim() == key) { 28 this.data.splice(i, 1); //开始位置,删除个数 29 status = true; 30 break; 31 } 32 } 33 return status; 34 }, 35 update: function(key, value) { 36 var status = false; 37 // 循环数组元素 38 for(var i = 0, len = this.data.length; i < len; i++) { 39 var item = this.data[i] 40 if(item.key.trim() === key.trim()) { 41 item.value = value.trim(); 42 status = true; 43 break; 44 } 45 } 46 return status; 47 }, 48 isExist: function(key) { 49 for(var i = 0, len = this.data.length; i < len; i++) { 50 var item = this.data[i] 51 if(key === item.key) { 52 return true; 53 } else { 54 return false; 55 } 56 } 57 } 58 }