Question

我有一个独立的HTML表单，我想添加一个类似于另存为草稿的功能。如果假设用户填写了一半表格并决定暂停并稍后继续填写表格。当用户再次访问网站时，用户可以使用先前填充的数据。简单来说，我希望能够实现类似保存的功能，并在以后完成表单。

另外，添加这是一个使用javascript的独立HTML表单。当我在网上浏览时，我发现一个建议是localStorage。但只是想知道是否有其他方法来实现此功能。请指导我一些有用的链接，它可以帮助我使用此功能。

Answer 1

如果您在客户端上执行操作，则可以使用当前可用的所有客户端持久性工具，如本地存储，websql，cookie。

我认为本地存储更容易实现，你会发现很多库为你提供了一个友好的界面来与它进行交互，例如jQuery的http://www.jstorage.info/或AngularJS的https://github.com/tymondesigns/angular-locker。

您需要做的是：

var frm = $(document.myform);
var inputs = frm.find('input');
inputs.change(function() {
var data = JSON.stringify(frm.serializeArray());
    localStorage.setItem("form", data);
})

您可以在页面加载期间检查该密钥是否存在于本地存储中，然后相应地填充表单。

希望有所帮助：）

Answer 2

只有几种方法可以做到这一点。完全可移植的实现将需要服务器端更改。

localStorage - Save Form using localstorage HTML5

使用Javascript保存在更改时输入到表单中的数据。无论您决定使用哪个版本，我都建议您实施此图层。
保存在数据库中 - 示例因后端语言而异。

最简单的实现是向数据库添加一个布尔列，指示已收集继续所需的所有数据。该版本具有可跨机器使用的优点。
云存储 - http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-intro.html

您可以考虑使用Amazon DynamoDB或其他NoSQL云存储系统等服务来缓存此类数据。将JSON对象发送到大多数NoSQL引擎并将其恢复到表单的便利性很好，并且代码与localStorage版本非常相似。
Q-Code / Code restore - http://webqr.com/

在我看来，这是最糟糕的选择。但是，它可能适合您的方案。生成一个Q-Code，用户可以扫描该代码以恢复包含数据的页面。 Q-Codes可以容纳大量数据。如果您的表单没有使用太多的文本输入，您可能会给用户一个简短的代码（5-8个字符），可以用来恢复表单状态。

使用javascript引入类似功能的草稿

2 个答案: