在 Web 应用程序中使用本地存储来保存/加载表单字段

Question

我正在尝试使用本地存储来在 Web 应用程序中保存/加载多组表单输入。我找到了一些参考资料，但我不确定如何将它们应用于我的需求。此外，我在这里找到的大多数示例都涉及存储一组设置，然后在下次加载页面/应用程序时加载这些设置：

www.graphicpush.com/using-localstorage-api-as-a-light-database
www.paperkilledrock.com/2010/05/html5-localstorage-part-three/

第一个链接 (graphicpush) 是我尝试用来存储多个表单输入值的链接，但我什至不确定这些值是否已放入数据库中。而且一旦它们被实际放入数据库中，我不知道如何有选择地从数据库中调用一个唯一 ID 并将其显示在表单中。

第二个链接，我已经看过并且非常接近我需要的内容，并且我遇到了与前面描述的相同的问题。

我的网络应用程序位于http://www.sovascreen.com/estimator，您可以在“save.js”文件中查看对本地存储的尝试。我知道我很遥远，所以请善待。

我觉得这应该是相当简单的，但我没有牢牢把握我应该做什么，所以任何帮助将不胜感激。

Answer 1

本地存储非常简单。入门：

// set
localStorage.setItem('blah', 'blahblah')

// check if it is set
localStorage.getItem('blah')

// check how many items are stored
localStorage.length

// another way to get the item 
localStorage.key(0);

// remove the item
localStorage.removeItem('blah')

Here's a Fiddle 有一个我写的小库供你交互。它允许通过JSON.parse 和stringify 将对象或字符串添加到本地存储。

点击“运行”几次，输出应如下所示：

blah is not set. setting to blahblah
["blah"]
blah is set to blahblah
[]
blah is not set. setting to blahblah
["blah"]
blah is set to blahblah
[]

Answer 2

该页面没有为我加载save.js 文件。您能否确认它按预期工作？

如果您使用的是 Chrome，开发者工具允许您查看 localStorage 的内容。单击资源 > 本地存储。它会显示您存储的所有键/值对，您也可以删除它们。