關于AngularJs數據的本地存儲詳解
第一、創(chuàng)建一個factory來儲存和調取你的數據(你可以單獨創(chuàng)建一個js文件,按照語義命名如:dataService.js。然后在你的主頁面引入這個JS文件)
<!--引入到你的主頁面里面-->
<script src="dataService.js"></script>
創(chuàng)建一個factory
'use strict';
angular.module('myApp')
.factory('datadService',['$window',function($window) {
return{
//存儲單個屬性
set :function(key,value){
$window.localStorage[key]=value;
},
//讀取單個屬性
get:function(key,defaultValue){
return $window.localStorage[key] || defaultValue;
},
//存儲對象,以JSON格式存儲
setObject:function(key,value){
$window.localStorage[key]=JSON.stringify(value);
},
//讀取對象
getObject: function (key) {
return JSON.parse($window.localStorage[key] || '{}');
}
}
}]);
第二、將你創(chuàng)建的這個方法模塊【datadService】注入到你要控制器中如下的控制器為【productCtrl】,下面我們創(chuàng)建一個set.js文件,里面代碼如下:
'use strict';
angular.module('myApp').controller(
'productCtrl',
[ '$scope','datadService',
function($scope, datadService) {
$scope.appiAppType = 1;
//這里面$scope.appiAppType的賦值同樣可以通過$http.post或者$http.get
//等方法返回的參數去賦值,例子如下:
//$http.post('這里是你所要訪問的接口【URL】',這里是你想要上傳的參數).success(function(data){
// $scope.appiAppType = data;
//});
datadService.setObject("lodinData", $scope.appiAppType);// 將你獲取來的數據存儲到你之前創(chuàng)建的【datadService】中,這里面的【lodinData】是KEY(個人理解就是你把數據存到大箱子里面這個箱子就是【datadService】,為了方便在這個箱子里面更好的尋找你想要的數據就給他一個小標簽,那就是【lodinData】)
} ]);
第三、關于存儲好的數據如何在不同的控制其中獲取到,下面我們創(chuàng)建一個get.js,里面代碼如下:
'use strict';
//首先大家要把之前創(chuàng)建好的模塊也就是那個裝數據的箱子【datadService】放到這個控制器中(也就是模塊注入)
//其次大家通過之前咱們設定的標簽【lodinData】,用【getObject('key')】方法取到你想要的數據;
//具體實現就一行代碼:datadService.getObject('lodinData');「注:把箱子拿出來(datadService)用(getObject)去拿你的這個(lodinData)標簽下的數據」
angular.module('myApp').controller(
'completeCtrl',
[ '$scope', 'datadService',
function($scope, datadService) {
//我們這里取到來上面已經存好的數據:【datadService.getObject('lodinData');】并且把這個數據賦值給了【$scope.LoginList】
$scope.LoginList = datadService.getObject('lodinData');
//這里大家可以打印一下$scope.LoginList 看看里面是什么;
alert(JSON.stringify($scope.LoginList))
} ]);
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
Angular搜索 過濾 批量刪除 添加 表單驗證功能集錦(實例代碼)
這篇文章主要介紹了Angular搜索 過濾 批量刪除 添加 表單驗證功能集錦(實例代碼),需要的朋友可以參考下2017-10-10
Angularjs 動態(tài)改變title標題(兼容ios)
這篇文章主要介紹了 Angularjs 動態(tài)改變title標題(兼容ios)的相關資料,需要的朋友可以參考下2016-12-12
Angular使用ng-messages與PHP進行表單數據驗證
這篇文章主要介紹了Angular使用ng-messages與PHP進行表單數據驗證,ng-messages提供了更方便的表單數據驗證服務,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12

