壹、什麽是緩存
壹個緩存就是壹個組件，它可以透明地存儲數據，以便未來可以更快地服務於請求。
緩存能夠服務的請求越多，整體系統性能就提升得越多。
二、Angular 中的緩存
2.1 $cacheFactory 簡介
$cacheFactory 是壹個為所有Angular服務生成緩存對象的服務。在內部， $cacheFactory 會創建壹個默認的緩存對象，即使我們並沒有顯示地創建。
要創建壹個緩存對象，可以使用 $cacheFactory 通過壹個ID創建壹個緩存：
var cache = $cacheFactory('myCache');
這個 $cacheFactory 方法可以接受兩個參數：
cacheId （字符串）：這個 cacheId 就是創建緩存時的ID名稱。可以通過 get() 方法使用緩存名稱來引用它。
capacity ：這個容量描述了在任何給定時間要使用緩存存儲並保存的緩存鍵值對的最大數量。
2.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 緩存註冊表中移除指定緩存的所有引用。
三、$/api.users.json');
// 刪除上壹次請求的緩存入口
cache.remove('/api.users.json');
// 重新開始並移除全部緩存
cache.removeAll(); var cache = $cacheFactory.get('$http');
if(cache.get('cacheData')){
console.log(cache.get('cacheData'));
}else{
helloService.play().then(
function (data) {
cache.put("cacheData", data);//往緩存中放入數據
console.log(data);
}
);
}3.2 自定義緩存
有時候能夠對緩存有更多的控制以及針對緩存的表現創建規則，這就需要創建壹個新的緩存來使用 $http 請求。
通過自定義的緩存來讓 $http 請求發起請求很簡單。可以采用傳遞緩存實例的方式，而不必傳遞壹個布爾參數 true 給請求。
var myCache = $cacheFactory('myCache');
$http({
method: 'GET',
utl: '/api/users.json',
cache: myCache
});壹個小demo:定義壹個緩存服務，依賴註入到妳要用的控制器中，直接使用
define([
'angularModule'
],function(app){
app.factory('myCache', ['$cacheFactory', function($cacheFactory){
return $cacheFactory('myCache'); //自定義壹個緩存服務
}])
}); //自定義緩存,有緩存就從緩存裏取，否則就發送請求
if(myCache.get('cacheData')){
console.log(myCache.get('cacheData'));
}else{
helloService.play(myCache).then(
function (data) {
myCache.put("cacheData", data);
console.log(data);
}
);
}
cache:只是為了可以使用默認$http的緩存機制
play : function (myCache) {
return httpRequestService.request({
method : 'get',
url : 'http://localhost:8080/hello/play',
cache : myCache
})
}現在， $http 將會使用自定義的緩存而非默認緩存。
四、為 $http 設置默認緩存
每次我們想要發起壹個 $http 請求時都要給它傳遞壹個緩存實例並不方便，特別是對每個請求使用同壹緩存的時候。
其實可以在模塊的 .config() 方法中通過 $httpProvider 設置 $http 默認使用的緩存對象。
angular.module('myApp', []).config(function($httpProvider) {
$httpProvider.defaults.cache = $cacheFactory('myCache', {capacity: 20});
});這個 $http 服務不再使用它為我們創建的默認緩存；它會使用我們自定義的緩存，實際上這就是壹個近期緩存最久未使用算法① （Least Recently Used，LRU）。
LRU緩存根據緩存容量只保留最新的緩存數目。也就是說，我們的緩存容量為20，因此會緩存前20個請求，但是進入第21個請求時，最近最少使用的請求條目就會從緩存中被刪除。這個緩存自身會負責具體哪些要維護，哪些要移除。
相信看了本文案例妳已經掌握了方法，更多精彩請關註Gxl網其它相關文章！
推薦閱讀：
jquery+fullpage添加界面內的頭部與版權
如何使用webpack+vue環境局域網