HTML5本地存储的使用方法

Question

3

我有一个非常庞大的表格，是为了质量保证人员在离线情况下收集年度产品质量审查数据而设计的。由于监管要求的复杂性，该表单包含超过1900个字段和单选按钮。

目前我已经通过sisyphus.js调用localStorage，并且它可以正常工作-保存所有字段的数据。

我的问题是，在加载时需要7秒钟才能完成表单加载-尽管这很长时间，但这不是真正的问题。我的真正问题是，在进行任何输入后，需要等待onblur事件结束后2秒钟左右，表单才能接受更多的输入。

以下是我的代码：

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

我的问题是：是否有一种方法可以通过按钮或其他方法在用户自行决定的情况下调用数据存储，以防止数据输入的不间断中断？有人有什么想法吗？

- Mitch

我会通过JavaScript调试器查看，找出JavaScript处理过程中哪些部分需要花费很长时间。也许sisyphus循环遍历每个元素以保存整个表单，而不仅仅是一个元素。在这个层面上，您需要寻找任何和所有的优化方法。 - Blue

也许将其拆分为多个较小的表单？ - markasoftware

@FrankerZ - 我会研究一下，但我的问题实际上是关于功能的。是否可能间歇性地调用localStorage而不是持续性地调用，这似乎是我找到的所有localStorage JavaScript插件的情况。 - Mitch

@Markasoftware - 嗯......你的评论让我现在探索一条不同的路径。我把整个HTML文档放在一个表单元素中，但并没有什么规定说我不能将它分成几个部分。我一定会测试使用多个<form id="x">元素的可能性，全部在同一个HTML文档中！ - Mitch

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bitwise Creative · Accepted Answer

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

如果您查看源代码：

您会看到有一个名为saveAllData的方法。与bindSaveDataOnChange方法一起使用，它会在每次更改字段时保存所有字段。

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

一个快速的解决方法可能是分叉/修改或覆盖插件以将bindSaveDataOnChange方法置空，并实现一个钩子以在按钮点击时保存表单数据。也许还要删除或增加timeout选项。