我最近尝试本地存储表单内容，使其能够抵御意外的标签关闭和崩溃。以下是我了解到的关于实现客户端存储的不同方法。

Cookie 可能失效

Cookie 不是一种有效的存储方式，因为它们的大小限制在大约 4000 个字符（4KB），并且像一个累赘，降低网站的响应速度。localStorage 另一方面，是专门为此目的而设计的，但在 IE6、IE7 和 Firefox3 中不可用。

store.js 来救援

因此，第一个任务是在这些旧版浏览器中查找可用的备用解决方案（或 *shim* 或 *polyfill*）。事实证明，store.js，由Marcus Westin（@marcuswestin）开发，将 localStorage 和回退方案封装在一个简洁的 API 中，文件大小很小（与 json2.js 一起压缩后为 2KB）。以下是一个简短的使用示例

它是如何工作的？

在 Firefox2 和 Firefox 3 中，它使用 globalStorage API，在 IE6 和 IE7 中，它回退到userData 行为，它有两个需要注意的重要限制

• 存储限制为 128KB（而 localStorage 为 5-10MB），这仍然是很多文本，
• 存储受 *相同文件夹策略* 的约束，这意味着不同文件夹中的页面不能访问相同的存储项。

第二个限制可能非常烦人，但可以通过在 iframe 中加载代码来解决。此技巧可能会集成到 Marcus 自己的代码中。

尽管 localStorage 只能存储字符串，但 store.js 使用JSON API 使得存储 Javascript 对象和数组成为可能。

防崩溃表单

使用此脚本，我能够构建Persival，一个简单的 jQuery 插件，可以监视表单的变化并立即持久化值

一个更复杂的演示页面 展示了用户在想要报告影响 Firefox 的错误时会遇到的表单（你会发现它实际上并不像看起来那么难）。如果您开始填写表单，然后关闭选项卡并再次点击相同的链接，您应该会看到魔法发生。这是一个简单但受欢迎的用户体验改进，不是吗？

Chris Heilmann 也演示了如何使用客户端存储来缓存 Web 服务数据并维护用户界面的状态：localStorage 及其使用方法。

轮到你了

Persival 仍然很年轻，但已经属于你了，请随意使用它，从中学习并改进它。

也许您想在下一篇文章中看到类似的主题？**告诉我们！**