角度でローカルストレージに保存して検索

Question

現在、入力フィールドから単一の値を保存して更新するアプリケーションがあります。しかし、私は複数の入力から保存する必要があると思いますが、これはどうすればよいかわかりません。これを行う方法についての助けをいただければ幸いです。

マイHTML：

<div ng-controller="newtripController as d"> 
    <input ng-model="d.startKm" value={{d.startKm}}/> 
    <input ng-model="d.stopKm" value={{d.stopkm}}/> 
    <input type="button" value="update" ng-click="d.update(d.startKm)" /> 
</div> 

マイコントローラ：

angular.module("app").controller("newtripController", 
    [ 
     "newtripService",function (newtripService){ 
      this.startKm = newtripService.getData(); 
      this.latestData = function(){ 
       return newtripService.getData(); 
      }; 
     this.update = function(val){ 
      return newtripService.setData(val); 
      }; 
     } 
    ]); 

マイサービス：

angular.module("app").factory("newtripService", 
    function($window, $rootScope){ 
     angular.element($window).on("storage", 
      function(event) { 
       if(event.key === "trip") { 
        $rootScope.$apply(); 
       } 
      }); 
     return { 
      setData: function(val) { 
       localStorage.setItem("trip", val); 
       return this; 
      }, 
      getData: function() { 
       return localStorage.getItem("trip"); 
      } 
     }; 
    } 
); 

Answer 1

なぜオブジェクト全体を保存しないのですか？

angular.module('app').controller('newtripController', 
[ 
    'newtripService',function (newtripService){ 
     this.trip = newtripService.getData(); 
    this.update = function(val){ 
     return newtripService.setData(this.trip); 
     }; 
    } 
]); 

<div ng-controller="newtripController as d"> 
    <input ng-model="d.trip.startKm" value={{d.trip.startKm}}/> 
    <input ng-model="d.trip.stopKm" value={{d.trip.stopkm}}/> 
    <input type="button" value="update" ng-click="d.update()" /> 
<div> 

私はこれをテストしていないので、それはそれはまっすぐとして働く場合は、オブジェクトを保存する前に、あなたはそれを文字列化する必要があるかもしれませんし、あなたがそれを取得するときに、JSONそれを解析してくださいしていません。それは次のようになります：

angular.module('app').controller('newtripController', 
[ 
    'newtripService',function (newtripService){ 
     this.trip = JSON.parse(newtripService.getData()); 
    this.update = function(val){ 
     return newtripService.setData(JSON.stringify(this.trip)); 
     }; 
    } 
]); 

Answer 2

データ・セット

localStorage.setItem("trip", val); 

データを入手する

localStorage.getItem("trip");