页面刷新时从本地存储恢复表单

Question

<div ng-repeat="filterSection in filterSections">
    <h4>{{ filterSection.title }}</h4>
    <div class="checkbox" ng-click="loaderStart()" ng-if="filterSection.control == 'checkbox'" ng-repeat="option in filterSection.options">
        <label>
            <input type="checkbox" ng-model="searchParameters[filterSection.key][option.key]" value="{{ option.key }}" checked><span></span> {{ option.value }}
        </label>
    </div>
</div>

我可以用 $scope.searchParameters .

我可以存储它 localStorage.setItem('search', JSON.stringify(cleanedParameters));

我可以使用 JSON.parse(localStorage.getItem("search"));

但是我不知道如何在页面刷新时恢复它。是否有一些我可以使用的指令函数或示例？我真的找不到与我的问题类似的东西。

Answer 1

您可以使用 angularJs 的 LocalStorageService 模块。

有关更多详细信息，请查看此链接 https://www.npmjs.com/package/angular-local-storage

Answer 2

您可以尝试如下所示。只需创建一个数组并将值推入其中即可。然后，您可以通过循环根据需要访问该数组值。

var a = [];
a.push(JSON.parse(localStorage.getItem('search')));

Answer 3

我正在使用ngStorage（抽象掉所有JSON解析的东西） - http://ngmodules.org/modules/ngStorage

然后在任何地方（在我的控制器、指令、服务中），我注入$localStorage提供程序，并将存储加载到$scope中：

app.controller("FooCtrl", ["$scope", "$localStorage", function($scope, $localStorage){
   $scope.storageStuff = $localStorage.somethingSavedInStorage;
}]);

编辑：http://jsfiddle.net/Lvc0u55v/2997/

Answer 4

我发现我可以毫不费力地将其直接注入$scope中。此解决方案工作正常：$scope.searchParameters=JSON.parse(localStorage.getItem("search"));

我试图自己解析整个事情，但这不值得付出努力:)

有了$scope.$watch('searchParameters', function (newValue, oldValue)我检查元素是否已更改，并在本地存储中更新它。