關於AngularJs資料的本地儲存實例詳解

本文主要介紹了每一個獨立的JS檔案或不同的控制器如何實現資料的共享與互動的方法。具有一定的參考價值，下面跟著小編一起來看下吧

第一、創建一個factory來儲​​存和調取你的數據(你可以單獨創建一個js文件，按照語義命名如：dataService.js。如下的控制器為【productCtrl】，下面我們建立一個set.js文件，裡面程式碼如下：

<!--引入到你的主页面里面-->
<script src="dataService.js"></script>
创建一个factory
&#39;use strict&#39;;
angular.module(&#39;myApp&#39;)
.factory(&#39;datadService&#39;,[&#39;$window&#39;,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] || &#39;{}&#39;);
  }
 }
}]);

第三、關於儲存好的資料如何在不同的控制其中取得到，下面我們建立一個get.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);// 将你获取来的数据存储到你之前创建的【datadService】中，这里面的【lodinData】是KEY（个人理解就是你把数据存到大箱子里面这个箱子就是【datadService】，为了方便在这个箱子里面更好的寻找你想要的数据就给他一个小标签，那就是【lodinData】）
 } ]);

以上是關於AngularJs資料的本地儲存實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！