HTML5 本地存储使用答案

【问题标题】：HTML5 localStorage usageHTML5 本地存储使用
【发布时间】：2015-06-01 11:38:21
【问题描述】：

我有一个巨大的表格，我打算让质量保证人员离线使用来收集年度产品质量审查的数据。由于监管要求的复杂性，此表单包含 1900 多个字段和单选按钮。

我目前通过 sisyphus.js 调用 localStorage，它正在工作 - 保存所有字段的数据就好了。

我的问题是，在加载过程中，表单完成加载需要 7 秒——当然这是很长的时间——但这不是真正的问题。我真正的问题是，在进行任何输入后，在 onblur 事件之后需要 2 秒多一点，表单才能接受更多输入。

这是我的代码：

$('form').sisyphus({
    locationBased: false,
    timeout: 10,
    autoRelease: false
});

我的问题：有没有一种方法可以根据用户的判断调用数据存储，例如通过按钮或其他方法，以防止数据输入的持续中断？

有人有什么想法吗？

【问题讨论】：

我会通过 javascript 调试器查看 javascript 中的哪些内容需要这么长时间来处理。也许sisyphus 循环遍历每个元素以保存整个表单，而不仅仅是一个元素。在这个级别，您需要寻找所有优化。
可能拆分成多个较小的形式？
@FrankerZ - 我会调查它，但我的问题实际上是功能之一。是否可以间歇性地而不是持久地调用 localStorage，这似乎是我发现的所有 localStorage javaScript 插件的情况。
@Markasoftware - 嗯......你的评论让我现在开始调查不同的路径。我已将整个 HTML 文档放在一个表单元素中 - 没有什么可以说我不能将它分解为不同的元素。我一定会测试在一个 HTML 文档中使用多个
元素的可能性！

【解决方案1】：

您使用的插件 (sisyphus.js) 似乎不是为处理“大量”字段而编写的。

如果你查看源代码：

你会看到有一个方法saveAllData。再加上bindSaveDataOnChange 方法，每次更改字段时都会保存所有字段。

而且，如果不是这种情况，您仍然会每 10 秒延迟 2 秒（超时选项）。

我希望，一个快速的解决方法是分叉/修改或覆盖插件以使bindSaveDataOnChange 方法无效，并实现一个挂钩以在按钮单击时保存表单数据。并且，也许，删除或增加 timeout 选项。

【讨论】：