页面刷新时从 LocalStorage 恢复表单答案

【问题标题】：Restoring form from LocalStorage when page refresh页面刷新时从 LocalStorage 恢复表单
【发布时间】：2016-04-26 17:24:51
【问题描述】：

<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"));

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

【问题讨论】：

为什么这个不起作用？ localStorage.getItem("search")
我可以访问它。但我不知道如何将其放入范围并在我的屏幕上生成它，因此所有复选框都被“选中”。我需要把它放在某种循环中......
你存储的是数组还是什么类型的数据？
键：搜索值：来自 Chrome 资源的 ["43","47"]。
那些是被选中的盒子的ID。

标签： javascript angularjs angularjs-scope angularjs-ng-repeat

【解决方案1】：

你可以使用angularJs的LocalStorageService模块。

更多详情请查看此链接https://www.npmjs.com/package/angular-local-storage

【讨论】：

但是我没有存储数据的问题。我在将这些数据放入表单时遇到问题。

【解决方案2】：

您可以尝试如下所示。只需创建一个数组并将值推送到该数组中。然后您可以通过循环访问该数组值。

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

【讨论】：

【解决方案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/

【讨论】：

如果你将它直接注入作用域，它会在屏幕上显示变化？我尝试将整个东西放入$scope.searchParameters=JSON.parse(localStorage.getItem("search"));，但它并没有真正起作用。如果本地存储中存在的条件为真，我只需要检查数组中的一些框。但不知道怎么做。

【解决方案4】：

我发现我可以毫不费力地将它直接注入 $scope。这个解决方案很好用：$scope.searchParameters=JSON.parse(localStorage.getItem("search"));

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

使用$scope.$watch('searchParameters', function (newValue, oldValue) 检查元素是否已更改，并在LocalStorage 中更新它。

【讨论】：