這次帶給大家怎麼操作angularjs緩存，操作angularjs快取的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、什麼是快取
一個快取就是一個元件，它可以透明地儲存數據，以便未來可以更快地服務於請求。
快取能夠服務的請求越多，整體系統效能就提升得越多。
二、Angular 中的快取
2.1 $cacheFactory 簡介
##$cacheFactory 是一個為所有Angular服務產生快取物件的服務。在內部， $cacheFactory 會建立一個預設的快取對象，即使我們並沒有顯示地建立。 要建立一個快取對象，可以用$cacheFactory 透過一個ID建立一個快取：var cache = $cacheFactory('myCache');這個$cacheFactory 方法可以接受兩個參數：
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 快取登錄中移除指定快取的所有參考。三、$http 中的快取
#Angular的 $http 服務創建了一個帶有ID為 $http 的快取。要讓 $http 請求使用預設的快取 物件很簡單： $http() 方法允許我們給它傳遞一個 cache 參數。3.1 預設的 $http 快取
當資料不會經常改變時，預設的 $http 快取就特別有用了。可以像這樣設定它：
$http({
method: 'GET',
url: '/api/users.json',
cache: true //设置为true只是用来使用$http默认的缓存机制
});var cache = $cacheFactory('$http');// 获取上一次请求的缓存
var usersCache = cache.get('http://example.com/api.users.json');
// 删除上一次请求的缓存入口
cache.remove('http://example.com/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
});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 请求时都要给它传递一个缓存实例并不方便，特别是对每个请求使用同一缓存的时候。
其实可以在模块的 .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个请求时，最近最少使用的请求条目就会从缓存中被删除。这个缓存自身会负责具体哪些要维护，哪些要移除。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是怎麼操作angularjs緩存的詳細內容。更多資訊請關注PHP中文網其他相關文章！
