angularjs數據存儲
① 怎樣操作angularjs緩存
這次給大家帶來怎樣操作angularjs緩存，操作angularjs緩存的注意事項有哪些，下面就是實戰案例，一起來看一下。
一、什麼是緩存
一個緩雀衫存就頃仔腔是一個組件，它可以透明地存儲數據，以便未來可以更快地服務於請求。
緩存能夠服務的請求越多，整體系統性能就提升得越多。
二、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 緩存注冊表中移除指定緩存的所有引用。
三、$http 中的緩存
Angular的 $http 服務創建了一個帶有ID為 $http 的緩存。 要讓 $http 請求使用默認的緩存 對象很簡單： $http() 方法允許我們給它傳遞一個 cache 參數。
3.1 默認的 $http 緩存
當數據不會經常改變時，默認的 $http 緩存就特別有用了。可以像這樣設置它：
$http({
method: 'GET',
url: '/api/users.json',
cache: true//設置為true只是用來使用$http默認的緩存機制
});現在，通過 $http 到URL /api/user.json 的每個請求將會存儲到默認的 $http 緩存中。 這個$http 緩存中的請求鍵就是完整的URL路徑。
如果需要，也可以操作這個默認的 $http 緩存（比如，如果我們發起的另外一個沒有緩存的請求提醒我們發生了增量變化，我們就可以在默認的 $http 請戚握求中清除這個請求）。
為了引用 $http 的默認請求，只需通過 $cacheFactory() 使用ID來獲取到該緩存：
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
});一個小demo:定義一個緩存服務，依賴注入到你要用的控制器中，直接使用
define([
'angularMole'
],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.mole('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環境區域網
② angularjs window.localstorage存儲的數據任何controller都可以讀取嗎
ocalStorage存儲方法 localStorage.name = localStorage["name"]='vanida'；localStorage.setItem("name","vanida");//這三種設置值方式是一樣的； localStorage獲取值方法 var name = localStorage["name"] = localStorage.name＝ localStorage...
③ 在anjular中 function中的$scope和$rootscope有什麼區別
scope是angularJS中的作用域(其實就是存儲數據的地方)，很類似javascript的原型鏈。搜索的時型嘩候，優先找自己的scope，如果沒有找到就沿著作用域鏈向上搜索，直至到達根作用域rootScope。
$rootScope是由angularJS載入模塊的時候自動創建的，每個模塊只會有1個rootScope。rootScope創建好會以服務的形式加入到$injector中。也就是說通過$injector.get("$rootScope");能夠獲取到某個模塊的根作用域。更准確的來說，$rootScope是由angularJS的核心模塊ng創建的。
scope是html和單個controller之間的橋梁，數據綁定就靠他了。rootscope是各個controller中scope的橋梁。用rootscope定義的值，可以在各個controller中使用
示例1：
//新建一個模塊
varmole=angular.mole("app",[]);
//true說明$rootScope確實以服務的形式包含在模塊的injector中
varhasNgInjector=angular.injector(['app','ng']);
console.log("has$rootScope="+hasNgInjector.has("$rootScope"));//true
//獲取模塊相應的injector對象,不獲取ng模塊中的服務
//不依賴於ng模塊,無法獲取$rootScope服務
varnoNgInjector=angular.injector(['app']);
console.log("no卜冊行$rootScope="+noNgInjector.has("$rootScope"));//false
//獲取angular核心的ng模塊
varngInjector=angular.injector(['ng']);
console.log("ng$rootScope="+ngInjector.has("$rootScope"));//true
上面的代碼的確可以說明：$rootScope的確是由核心模塊ng創建的，並以服務的形式存在於injector中。
如果創建injector的時候，指定了ng模塊，那麼該injector中就會包含$rootScope服務；否則就不包含$rootScope。
示例2：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<scriptsrc="angular-1.2.25.js"></script>
<script>
varmole=angular.mole("app",[]);
//控制器里的$injector,是由angular框架自動創建的
functionFirstController($scope,$injector,$rootScope)
{
$rootScope.name="aty";
}
//自己創建了個injector,依賴於app和ng模塊
varmyInjector=angular.injector(["app","ng"]);
varrootScope=myInjector.get("$rootScope");
alert(rootScope.name);//udefined
</script>
</head>
姿渣<bodyng-app="app">
<divid="first"ng-controller="FirstController">
<inputtype="text"ng-model="name">
<br>
{{name}}
</div>
</body>
</html>
angular.injector()可以調用多次，每次都返回新建的injector對象。所以我們自己創建的myInjector和angular自動創建的$injector不是同一個對象，那麼得到的rootScope也就不是同一個。
示例3：
<!doctypehtml>
<htmllang="en">
<head>
<scriptsrc="angular-1.2.25.js"></script>
<script>
functionFirstController($scope,$injector,$rootScope)
{
//true
console.log("scopeparent:"+($scope.$parent==$rootScope));
}
</script>
</head>
<bodyng-app>
<divid="first"ng-controller="FirstController">
<inputtype="text"ng-model="name">
<br>
{{name}}
</div>
</body>
</html>
ng-controller指令給所在的DOM元素創建了一個新的$scope對象,並作為rootScope的子作用域。$scope是由$rootScope創建的，$scope不會保護在$injector中。
示例4：
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>scope()</title>
<scriptsrc="jquery-1.11.1.js"></script>
<scriptsrc="angular-1.2.25.js"></script>
<script>
//記住rootScope，用來判斷跨控制器是否相等
varfirst_rootScope=null;
//記住scope，用來判斷跨控制器是否相等
varfirst_scope=null;
//記住injector，用來判斷跨控制器是否相等
varfirst_injectot=null;
//第1個angular控制器
functionFirstController($scope,$injector,$rootScope)
{
$rootScope.name="aty";
first_rootScope=$rootScope;
first_injectot=$injector;
first_scope=$scope;
}
//第2個angular控制器,主要是來測試跨controller時injector和scope的表現
functionSecondController($scope,$injector,$rootScope)
{
console.log("first_rootScope==second_rootScope:"+(first_rootScope==$rootScope));//true
console.log("first_injectot==second_injector:"+(first_injectot==$injector));//true
console.log("first_scope==second_scope:"+(first_scope==$scope));//false
}
</script>
</head>
<bodyng-app>
<divid="first"ng-controller="FirstController">
<inputtype="text"ng-model="name">
<br>
<divid="tips"></div>
</div>
<h2>outsideofcontroller</h2>
<br>
<!--訪問每一個應用(模塊)的rootScope-->
{{$root.name}}
<divid="noControllerDiv"/>
<divng-controller="SecondController">
</div>
</body>
</html>
ng-app定義了一個angular模塊，每個模塊只有一個$rootScope，只有一個$injector，但可以有多個$scope。
弄清了$injector、$rootScope和$scope這3者之間的關系，我們看下angular提供的2個API，一個是scope()，一個是injector()。使用angular.element()返回的DOM對象，都會包含這2個方法，用來獲取與之關聯的scope和injector。
由於每個模塊的injector是唯一的，所以angular.element().injector()直接返回元素所在模塊的injector。
angular.element().scope()可以獲取到當前元素的scope或父scope。如果當前元素有scope，則返回自己的scope;如果沒有則向父親方向尋找,如果找不到返回rootScope。即返回作用域鏈上，距離該元素最近的scope。
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>scope()</title>
<scriptsrc="jquery-1.11.1.js"></script>
<scriptsrc="angular-1.2.25.js"></script>
<script>
functionFirstController($scope,$injector,$rootScope)
{
//獲取body對象
vardomBody=document.getElementsByTagName('body')[0];
//通過ng-app指令所在的DOM元素獲取rootScope
varrtScope=angular.element(domBody).scope();
//當前元素沒有新作用域,獲取父作用域即rootScope
varnoScope=angular.element("#noControllerDiv").scope();
//true
console.log("rtScope==noScope:"+(rtScope==noScope));
//ng-controller所在的元素,返回的scope
varscopeOnController=angular.element("#first").scope();
//ng-controller內部的元素返回所在的scope
varinController=angular.element("#tips").scope();
//true
console.log("scopeOnController==inController:"+(scopeOnController==inController));
//驗證通過DOM獲取的scope是否與注入的$scope和$rootScope一致
//true
console.log("result1:"+(rtScope==$rootScope));
//true
console.log("result2:"+(inController==$scope));
}
</script>
</head>
<bodyng-app>
<divid="first"ng-controller="FirstController">
<inputtype="text"ng-model="name">
<br>
<divid="tips"></div>
</div>
<h2>outsideofcontroller</h2>
<br>
<!--訪問每一個應用(模塊)的rootScope-->
{{$root.name}}
<divid="noControllerDiv"/>
</body>
</html>