Angularjs中的緩存以及緩存清理

寫在最前面：這篇博文是2篇文章組成，詳細介紹了Angularjs中的緩存以及緩存清理，文章由上海尚學堂轉載過來，歡迎大家閱讀和評論。轉載請注明出處，謝謝！

 

 

一個緩存就是一個組件，它可以透明地儲存數據，以便以后可以更快地服務於請求。多次重復地獲取資源可能會導致數據重復，消耗時間。因此緩存適用於變化性不大的一些數據，緩存能夠服務的請求越多，整體系統性能就能提升越多。
 

 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中的緩存清理》，

一、清除模板緩存

 

.run(function($rootScope, $templateCache) {
            $rootScope.$on('$routeChangeStart', function(event, next, current) {
                if (typeof(current) !== 'undefined'){
                    $templateCache.remove(current.templateUrl);
                }
            });
        });
上海前端培訓  shsxt.com/html5

二、html添加隨機參數

 

.state("content", {
               url: "/",
               views:{
                   "bodyInfo":{templateUrl: 'tpls/bodyInfo.html?'+ +new Date(),
                       controller:'bodyInfoCtrl'},
                   "header":{templateUrl: 'tpls/header.html?'+ +new Date(),
                       controller:'headerCtrl'
                   },
                   "footer":{templateUrl: 'tpls/footer.html?'+ +new Date(),
                       controller:'footerCtrl'
                   }
               }
            })

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

三、清除route緩存

 

.config(['$stateProvider', '$urlRouterProvider','$locationProvider','$httpProvider',function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) {
//         $urlRouterProvider.when("", "/home");
            $urlRouterProvider.otherwise('/');
             if (!$httpProvider.defaults.headers.get) {
              $httpProvider.defaults.headers.get = {};
            }
            $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
            $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
            $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
上海前端培訓  shsxt.com/html5

對於Angularjs中的緩存介紹，推薦閱讀《【上海前端培訓】Angularjs中的緩存》；如需更多前端技術文章，請點擊 上海前端培訓