在 Web 应用程序中保存/加载表单输入值答案

【问题标题】：Save/Load Form Input Values in Web App在 Web 应用程序中保存/加载表单输入值
【发布时间】：2012-01-03 03:26:21
【问题描述】：

我正在开发一个应用程序，它实际上是一个美化的计算器。我需要这个应用程序能够根据用户请求将值保存到客户端数据库（位于用户设备上），然后能够加载保存的计算并将任何特定的保存值集输入回表单中。

我一直在寻找答案，但实际上只找到了与在应用程序中提交表单和传递输入值有关的教程/演练，但没有关于如何执行此操作和存储/恢复多个条目的内容。这些是我用来获得基本了解的几个网站。：

和

任何帮助将不胜感激。

我目前正在使用 jquery mobile，作为 Web 应用程序进行开发/测试，并使用 phonegap 编译成 android 和 ios 原生应用程序。

【问题讨论】：

保存客户端需要多少数据？如果不是那么多，你可以使用cookies。
如果你已经在使用phonegap，你有没有看过storage api？ docs.phonegap.com/en/1.3.0/…
我查看了存储 API，但不知道如何准确地实现它来保存表单输入值，然后根据用户的请求恢复它们？ @Ivan：我只希望能够保存/加载大约 5kb 的数据包，所以不多。我将如何使用 cookie 来保存表单输入值并根据用户的请求恢复它们？

【解决方案1】：

由于 Chrome 对 cookie 的大小有 4kb 的限制，我会选择 HTML 5 的 localStorage。但是，如果 cookie 的大小小于 4kb，那么我会选择 cookie，因为它们更有可能被支持。我将列出一些您可以使用的选项：

选项 1：Cookies

如果你想在 jQuery 中使用 cookie，你需要这个插件：http://plugins.jquery.com/project/Cookie。

然后你可以像这样设置cookie：

$.cookie("key", "value");

然后，如果我们想要获取 cookie，我们只需键入：

$.cookie("key");

有关如何获取和设置 cookie 的更多信息，请查看 this blog post（我写这篇博文是为了公平起见）。

如果移动浏览器支持本地存储，那么您可以使用它来存储超过 5kb 的数据。

为了使用本地存储，您只需像 Javascript 中的任何其他对象一样使用它：

if(localstorage.data) {
  // Do something with localstorage.data
} else {
  // Set localstorage.data
}

选项 3 是最安全的选择。在客户端创建会话cookie，并将数据与服务器端的会话cookie相关联。

虽然这不是您想要的（因为您想要客户端的数据），但它会给您最大的灵活性。

【讨论】：