javascript - 使用 Angular 保存到本地存储并从本地存储中检索

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>

我的 Controller :

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));
        };
    }
]);