如何离线保存html表单的状态并允许加载答案

【问题标题】：How to save state of html form offline and allow loading如何离线保存html表单的状态并允许加载
【发布时间】：2018-06-07 10:20:55
【问题描述】：

我正在寻找非网络解决方案。 IE。我有一个独立的 html 表单，我希望可以选择将所有字段的状态离线保存到 .csv/.txt/json 中。之后可以再次打开 html 文件，并且可以选择加载 .csv/.txt/json 文件。

我尝试了 sisyphus js，但它使用 LocalStorage 并且不允许在另一个浏览器或终端上加载数据。不过，实时持久保存到 LocalStorage 很酷。

编辑：例如，我想在下面的 html 中添加一个保存按钮： demo

【问题讨论】：

【解决方案1】：

我不确定您如何定义非网络和离线。

但是如果你有一个本地的web服务器，你可以使用php打开并保存到文件。

如果您不需要网络服务器，您可以使用本地存储，您可以通过 javascript 访问该存储。不需要框架或库。由于数据存储在您的计算机上，因此网站是托管的还是只是在浏览器中作为文件打开都没有关系。

如果您想跨机器获取数据，您需要一个 Web 服务器和 Phiter 某种数据库。你需要一个密码来保护你的数据

【讨论】：

【解决方案2】：

如果我理解正确，您需要直接从客户端计算机写入/读取文件吗？

据我所知，出于安全原因，大多数浏览器都不支持此功能：/

【讨论】：

【解决方案3】：

为了保存文件，您可以很容易地生成一个数据 URI 并将用户定向到它。较新的解决方案可以使用类似filesaver.js:
https://github.com/eligrey/FileSaver.js/

要加载保存的文件，您可以查看 Files API。

【讨论】：

当我尝试在eligrey.com/demos/FileSaver.js 中找到的演示时，这似乎工作得非常好但是，我如何为多个表单执行此操作并允许加载 .txt 文件来填写表单。跨度>
Filesaver 只是获取您提供的任何数据，并让用户保存它。对于加载文件，我提到了查看 HTML Files API。它允许用户从他们的计算机中选择一些文件，并让您读取其中的数据。至于这些文件中的内容以及如何处理数据，完全取决于您。我会使用 JSON。有很好的 Javascript 方法可以从对象生成 JSON，并将其解析回对象。请记住，如果此答案有帮助，请将其标记为最佳答案！
我尝试集成 filesaver.js 并查看您随后提到的我不太了解的内容。是否可以使用我创建的演示来展示一个示例？ file.io/6E9vs8