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>