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