Angularjs中的缓存以及缓存清理

桃扇骨 2022-05-28 04:45 395阅读 0赞

**写在最前面：这篇博文是2篇文章组成，详细介绍了Angularjs中的缓存以及缓存清理，文章由[上海尚学堂][Link 1]转载过来，欢迎大家阅读和评论。转载请注明出处，谢谢！**

**一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。**

## ** 1、 $cacheFactory 简介 ** ##

**  **

$cacheFactory 是一个为所有Angular服务生成缓存对象的服务。在内部， $cacheFactory 会创建一个默认的缓存对象，即使我们并没有显示地创建。

要创建一个缓存对象，可以使用 $cacheFactory 通过一个ID创建一个缓存：

var cache = $cacheFactory('myCache');

这个 $cacheFactory 方法可以接受两个参数：

cacheId （字符串）：这个 cacheId 就是创建缓存时的ID名称。可以通过 get() 方法使用缓存名称来引用它。

capacity ：这个容量描述了在任何给定时间要使用缓存存储并保存的缓存键值对的最大数量。

## 2、 缓存对象 ##

缓存对象自身有下列这些方法可以用来与缓存交互。  
  
info() ： info() 方法返回缓存对象的ID、尺寸和选项。  
  
put() ： put() 方法允许我们把任意JavaScript对象值形式的键（字符串）放进缓存中。cache.put("hello","world");  
  
put() 方法会返回我们放入缓存中的值。  
  
get() ： get() 方法让我们能够访问一个键对应的缓存值。如果找到了这个键，它会返回它的值；如果没有找到，它会返回 undefined 。cache.get("hello");  
  
remove() ： remove() 函数用于在找到一个键值对的情况下从缓存中移除它。如果没有找到，它就会返回 undefined 。cache.remove("hello");  
  
removeAll() ： removeAll() 函数用于重置缓存，同时移除所有已缓存的值。  
  
destory() ： destory() 方法用于从 $cacheFactory 缓存注册表中移除指定缓存的所有引用。

## 3、$http中的缓存 ##

$http()方法允许我们传递一个cache参数。当数据不会经常改变的时候，默认的$http缓存会特别有用。其中，默认的$http缓存对象是 var cache = $cacheFactory('$http'); 可以这样设置它

$http({
         method: 'GET', url: 'api/user.json', cache: true })

其中，缓存的键值为url， var userCache = cache.get('api/user.json')

##    4、自定义缓存 ##

通过自定义的缓存来让$http发起请求也很简单，只需把cache值设为对应缓存对象名称即可

$http({
         method: 'GET', url: 'api/user.json', cache: myCache })

或者通过config配置来设置每个$http请求的缓存对象，而不必像上面的例子中，往每一个$http请求中加入配置

app.config(function($httpProvider){ $httpProvider.defaults.cache = $cacheFactory('myCache',{capacity: 20})

其中，capacity会使用"近期缓存最久未使用算法"，就是说，加如缓存容量为20，现在已经缓存了缓存20个，当第21个想要被缓存的时候，最久最小未被使用的缓存键值对会被清除，以便腾出空间容纳第21个缓存。

先讲到这里，接下来再看看《[【上海前端培训】Angularjs中的缓存清理][Angularjs]》，

**一、清除模板缓存**

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  .run(**function($rootScope, $templateCache) \{    **
2.              $rootScope.$on('$routeChangeStart', **function(event, next, current) \{    **
3.                  **if (typeof(current) !== 'undefined')\{    **
4.                      $templateCache.remove(current.templateUrl);    
5.                  \}    
6.              \});    
7.          \});   
8.  上海前端培训  shsxt.com/html5

二、html添加随机参数

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  .state("content", \{  
2.                 url: "/",  
3.                 views:\{  
4.                     "bodyInfo":\{templateUrl: 'tpls/bodyInfo.html?'+ +**new Date(),  **
5.                         controller:'bodyInfoCtrl'\},  
6.                     "header":\{templateUrl: 'tpls/header.html?'+ +**new Date(),  **
7.                         controller:'headerCtrl'  
8.                     \},  
9.                     "footer":\{templateUrl: 'tpls/footer.html?'+ +**new Date(),  **
10.                        controller:'footerCtrl'  
11.                    \}  
12.                \}  
13.             \})

**\[html\]**  [view plain][]  [copy][view plain]

1.  <link rel="stylesheet" href="stylesheets/main.css?version=1.0.3">

三、清除route缓存

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  .config(\['$stateProvider', '$urlRouterProvider','$locationProvider','$httpProvider',**function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) \{  **
2.  //         $urlRouterProvider.when("", "/home");  
3.              $urlRouterProvider.otherwise('/');  
4.               **if (!$httpProvider.defaults.headers.get) \{  **
5.                $httpProvider.defaults.headers.get = \{\};  
6.              \}  
7.              $httpProvider.defaults.headers.common\["X-Requested-With"\] = 'XMLHttpRequest';  
8.              $httpProvider.defaults.headers.get\['Cache-Control'\] = 'no-cache';  
9.              $httpProvider.defaults.headers.get\['Pragma'\] = 'no-cache';  
10. 上海前端培训  shsxt.com/html5

对于Angularjs中的缓存介绍，推荐阅读《[【上海前端培训】Angularjs中的缓存][Angularjs 1]》；如需更多前端技术文章，请点击 [***上海前端培训***][Link 2]

[Link 1]: http://www.shsxt.com/
[Angularjs]: http://www.shsxt.com/it/html5/986.html
[view plain]: http://blog.csdn.net/jimolangyaleng/article/details/76617771#
[Angularjs 1]: http://www.shsxt.com/it/html5/985.html
[Link 2]: http://www.shsxt.com/it/html5