記憶體存儲

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 }