HTML5 localStorage用法

Question

我有一个巨大的表格，我打算让质量保证人员在年度产品质量评估的数据收集中使用OFFLINE。由于监管要求的复杂性，此表格包含超过1900个字段和单选按钮。

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

我的问题是，在加载时，表单需要7秒才能完成加载 - 授予它很长一段时间 - 但这不是真正的问题。我的真实问题是，在进行任何输入之后，在onblur事件之后需要花费2秒多的时间让表单接受更多输入。

这是我的代码：

@using (Html.BeginForm())
{
    <table>

            @for (int i = 0; i < Model.Count; i++)
            {
                <tr>
                    <td>
                        @Html.HiddenFor(m => m[i].Question_ID)
                        @Html.HiddenFor(m => m[i].Type)
                        @Html.DisplayFor(m => m[i].Question)
                    </td>
                </tr>
                <tr>
                    @if(@Html.DisplayFor(m=> m[i].Type =="Info_Text") **
                    {
                        <td>
                              //DO NOTHING
                        </td>                
                    }
                    else
                    { 
                    <td>
                        @Html.EditorFor(m => m[i].Answer)
                    </td>
                    }
                </tr>
            }

    </table>

我的问题：有没有办法根据用户的意愿调用数据存储，可能是通过按钮或其他方法，以防止数据输入不断中断？

有人有什么想法吗？

Answer 1

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

如果你看一下来源：

https://raw.githubusercontent.com/simsalabim/sisyphus/master/sisyphus.js

你会看到方法saveAllData。与bindSaveDataOnChange方法结合使用，每次更改字段时都会保存所有字段。

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

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