如何使用 localStorage 和 angularJS 编辑表单中的数据答案

【问题标题】：How to edit data in a form with localStorage and angularJS如何使用 localStorage 和 angularJS 编辑表单中的数据
【发布时间】：2018-07-17 02:35:07
【问题描述】：

我在一个页面上有一个填写表格，在另一个页面上有一个列表，其中有一个编辑按钮。如果我点击编辑按钮，我应该被引导到带有显示我想要编辑的数据的表单的页面。我真的被困在另一个带有选定数据的表单页面上。有谁知道如何做到这一点？ html:

<button class="button" type="button" ng-click="edit()">
            <i class="fa fa-edit"></i>
        </button>

controller.js

 $scope.edit = function (value) {     
        $location.path('/add-expense');
        expService.editEntry(value);

    };

services.js：

  //attempt to edit the form   
        editEntry: function (value) {
            var oldValue = localStorage.getItem(value.key);
            value.key = oldValue.key;
            localStorage.setItem(value.key, value);
        },

【问题讨论】：

有数百种方法可以做到这一点，它们都同样有效。（没有一个正确答案，甚至没有几个最佳答案。）一种选择是将要加载的表单的值存储在 url 中（或本地存储中），并在第二页上检索它，然后加载正确的形式。
另一个根本就是根本不加载第二个页面，而是在同一页面上使用 JavaScript 以正确的形式呈现新的“页面”。（这称为SPA。
SPA 听起来不错，但是当我点击编辑时如何用正确的数据渲染新页面呢？
取决于您如何设置网站。找到一个为 Angular 编写的优秀 SPA 教程，并尝试遵循它。如果您遇到特定问题，我们可以为您提供帮助；但是Stack Overflow 不具备构建整个站点或制作教程的能力。

标签： javascript html angularjs local-storage

【解决方案1】：

如果您真的想将数据存储在浏览器的本地存储中，您可以：

window.localStorage.setItem('key', value);

然后回忆一下

var data = window.localStorage.getItem('key')

删除它

window.localStorage.removeItem('key');

虽然我同意本地存储不是保存表单数据的地方。最好通过路由参数传递到新页面，这需要你使用angularjs路由模块，教程：https://docs.angularjs.org/tutorial/step_09

或者，将您的编辑按钮更改为如下所示：

<a href="~/expense/{{expense.ID}}">Edit</a>

然后在您的服务器端，使用 ID 参数将您编辑的项目的数据加载到结果视图中。

【讨论】：

我设法使用 Angular Xeditable 在同一个列表上进行了编辑。所以我设法只单击列表并在那里进行编辑->输入新值，保存，它显示新值->然后刷新，它又回到了旧值。怎么不保存？