内存存储

1.  实现效果
 
    a.增加
    　　
    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 }

 

 
        
 
 
posted @ 2016-09-23 16:51  Yaopengfei  阅读(274)  评论(2)  编辑  收藏  举报