使用HTML5和Sisyphus.js自动保存用户在表单中的输入

浏览器突然崩溃时，你有没有在线填写长篇表格或撰写雄辩的文章？或者可能意外关闭了浏览器，或者互联网连接中断，或者突然断电情况，那么我们编写的文章可能就白写了。

想象一下，在提交表单之前然后丢失所有数据，这种情况使得用户感受到愤怒。所以我们需要帮助用户保存这些数据。

一种常见的解决方案是在本地文档中编写一个注释，定期保存文件，然后在文本完成后将文本复制并粘贴到表单中。某些表单还允许通过单击按钮来保存草稿，但并非所有表单都具有此功能，并且它不是最方便的解决方案。最好的产品是Gmail，其自动保存功能用于草稿：只需键入，所有内容都会自动存储，甚至无需按下按钮。

在发布了Sisyphus.js之后，我们了解了Lazarus，这是Firefox和Chrome的扩展，有助于恢复表单数据，但浏览器插件会导致更大的问题：分发。一些用户不知道浏览器扩展是什么 - 事实上，许多用户并没有使这种方法在大规模上不合适。

与用户直接对话的人是Web开发人员。因此，在开发阶段解决用户输入问题似乎开发人员最大追求。

实现类似Gmail的自动保存草稿并不简单，我们希望解决方案简单易用。

结果是一个不起眼的脚本，它将表单数据存储到用户浏览器的本地存储中，并在用户重新加载或重新打开页面或在新选项卡中打开页面时恢复它。当用户提交或重置表单时，将从本地存储中清除数据。

实现使用Sisyphus.js保存用户赎金非常简单，只需选择你要保护的表格：

$('#form1, #form2').sisyphus();

或保护页面上的所有表格：

$('form').sisyphus();

以下值是默认值，但可以自定义：

{ customKeyPrefix: ’, timeout: 0, onSave: function() {}, onRestore: function() {}, onRelease: function() {} }

让我们打破这些选择：

• customKeyPrefix
• 对本地存储详细信息中的键添加，以便存储表单字段的值。
• timeout
• 保存数据之后的间隔（以秒为单位）。如果设置为
• 0
• ，则每次更新字段时都会保存。
• onSave
• 每次将数据保存到本地存储时触发的函数。
• onRestore
• 从本地存储还原表单数据时触发的函数。
• onSaveCallback
• 与之不同，它适用于整个表单，而不是单个字段。
• onRelease
• 清除本地存储的存储数据时触发的函数。

即使在表单中实现了Sisyphus.js之后，你也可以将其应用于任何其他表单，并且脚本不会创建冗余实例，并且它将使用相同的选项。例如：

当然，可以动态更改选项：

要求： Sisyphus.js需要jQuery 1.2或更高版本。

浏览器支持：

• Chrome 4+，
• Firefox 3.5+，
• Opera 10.5+，
• Safari 4+，
• IE 8+，
• 它也适用于Android所以版本。其他移动平台尚未经过测试。