敲除 viewModel：将其保存在 localStorage 上并检索它

Question

我使用 knockout 根据从 Web 服务获取的一些数据在页面中执行各种操作。用户之后可以 select 某些事情并通过一些 select 输入操作数据，这会影响 knockout 的 viewModel。

当用户完成更改后，它将继续到下一个表单（带有 POST），这是另一个网页。

我想做的是在离开页面之前将当前 viewModel 存储在 localStorage 中，如果 he/she 按下返回，则从 localStorage 加载 viewModel。

所以在用户离开页面之前，在我的 viewModel 中我会这样做：

localStorage.setItem("vM", JSON.stringify(self));

然后在我的第一页我有：

var viewModel; viewModel = JSON.parse(localStorage.getItem("vM"));

if(viewModel == undefined || viewModel == null)  viewModel = new vM();

ko.applyBindings(viewModel);

但是从json解析后viewModel并不是一个有效的knockout模型。有办法吗？

谢谢

Answer 1

当一个 knockout viewModel 被字符串化时，由于 observables 的缘故，它不能干净地序列化，所以它不能被直接反序列化回一个有效的 viewModel。

最好的方法是使用 ko.json 函数将您的视图模型转换为具有所有当前值的普通对象版本。将其保存在 localStorage 中。

然后您必须正常初始化您的 viewModel，并在创建 observable 时插入从 localStorage 检索到的对象的值。

可以在文档中找到更多详细信息： http://knockoutjs.com/documentation/json-data.html

Answer 2

尝试使用 knockout.mapping 插件。

在保存到 localStorage 调用之前：

var unmapped = ko.mapping.toJS(viewModel);

要使用来自 localStorage 的数据更新模型，请使用

ko.mapping.fromJS(data, viewModel);

敲除 viewModel：将其保存在 localStorage 上并检索它

knockout viewModel: save it on localStrorage and retrive it

knockout.js