Angular中的缓存

1. $cacheFactory服务创建缓存对象

调用格式：$cahceFactory(key,[options])

  参数key表示缓存对象的名称，可选参数options是一个对象，用于指定缓存的特征，通常情况下，将再这个对象中添加一个capacity属性，它是一个数字，用于说明缓存的最大容量。
  例如capacity=3，表示它只能缓存前3次的请求，进入第4次时，自动将使用最少的内容从缓存中删除，整个方法返回一个指定键名的缓存对象，通过get方法可以访问这个对象：$cacheFactory.get(key)
  创建或获取缓存对象后，就可以使用对象本身的方法来进行缓存操作了。

1. info
   var cache=$cahcefactory(‘test’);//创建缓存对象
   console.log(cache);//输出缓存对象的大小和名称信息:Object{id:’test’,size:0}
2. put
   cache.put(‘c1’,’hello’);
   console.log(cache.put(‘c1’,’hello’));
   向cache缓存对象中添加一个键名c1、键值为hello的缓存内容。
   整个对象将返回添加后的键值，所以输出’hello’
3. get
   console.log(cache.get(‘c1’));
   输出键名为’c1’对应的值，如果没找到，则返回undefined
4. remove
   cache.remove(‘c1’);
5. removeAll && destory
   前者移除全部的缓存内容，并充值缓存结构，后者从$cacheFactory注册表中删除所有的缓存引用条目，并重置缓存对象。

    <div ng-controller='myController'>        <input type="text" ng-model='cname' maxlength=5 />        <button ng-click='cset()'>设置</button>        <button ng-click='cshow()'>显示</button>        <button ng-click='cdel()'>删除</button>        <div>缓存值是：{{cvalue}}</div>    </div>    <script type="text/javascript">        var app=angular.module('myapp',[]);        app.service('cache',function($cacheFactory){            return $cacheFactory('test');        });        app.controller('myController',['$scope','cache',function($scope,cache){            $scope.cset=function(){                cache.put('mytest',$scope.cname);            };            $scope.cshow=function(){                var tcache=cache.get('mytest');                $scope.cvalue=tcache?tcache:'空值';            };            $scope.cdel=function(){                cache.remove('mytest')            }        }])    </script>

2. $http服务中的缓存

  在Angular中，当调用$http方法与服务端进行数据交互式，也能使用缓存。
使用的方式是在配置对象中添加一个名为cache的属性，并将其属性值设置为true，表示开启请求缓存。
  一旦开启了请求缓存，那么就可以直接调用名为$http缓存对象的get方法，以请求的URL地址作为键名，获取每次发送HTTP请求后缓存下来的返回数据。
这个名为$http的缓存对象，是在发送HTTP请求时，由$cacheFactory服务默认创建的，直接使用即可。

     <div ng-controller='myController'>        <div>接收的内容是：{{result}}</div>        <div>缓存的内容是：{{cache}}</div>    </div>    <script type="text/javascript">        angular.module('myapp',[])            .controller('myController',['$scope','$http','$cacheFactory',function($scope,$http,$cacheFactory){                var url='/post';                var cache=$cacheFactory.get('$http');                $http({                    method:'GET',                    url:url,                    cache:true                })                .then(function(data,status,headers,config){                    $scope.result=data.data;                    var arrResp=cache.get(url);                    $scope.cache=arrResp[0]+'_'+arrResp[1];                })            }])    </script>

3. 自定义$http服务中的缓存

    <div ng-controller='myController'>        <div>接收的内容是：{{result}}</div>        <button ng-click='refresh()'>刷新</button>    </div>    <script type="text/javascript">        angular.module('myapp',[])            //创建一个名为cache的服务，该服务返回一个自定义名称为mycache的缓存对象实例            //并将缓存实例最大容量定义为3次            .service('cache',function($cacheFactory){                return $cacheFactory('mycache',{capacity:3});            })            .controller('myController',['$scope','$http','cache',function($scope,$http,cache){                var url='/post';                $http({                    method:'GET',                    url:url,                    cache:cache                })                .then(function(data,status,headers,config){                    $scope.result=data.data;                    cache.put('c',data.data);                });                $scope.refresh=function(){                    var _c=cache.get('c');                    $scope.result=(_c)?_c+'(来源缓存)':'刷新失败！';                }            }])    </script>

  以上代码，在构建控制器代码时，注入cache服务，并将配置对象中的cache属性值设为cache服务对象，实现缓存实例传递的功能。
  值得注意的是，无论是默认还是自定义的缓存对象，它们仅保存在一个请求中，没有保存在内存或文件中，因此，一旦刷新页面，原来的缓存内容都将丢失。