使用或应该使用 localStorage 的网站示例

localStorage 是 HTML5 中一个新的 JavaScript API，允许我们将数据以键值对的形式保存在用户的浏览器中。它有点像 Cookie 除了:

• Cookie 会过期并被清除很多次，localStorage 则永久存在（直到显式清除）。
• localStorage 不会在 HTTP 请求中发送，您需要手动请求它。
• 您可以在 localStorage 中存储比 Cookie 更多的数据。
• localStorage 的 API 非常简单易用。

如果您需要了解更多信息，我最近制作了一个关于 localStorage 的 视频教程。这就是它的工作原理

/* Set some data */
localStorage.setItem("key", "value");

/* Get some data */
localStorage.getItem("key");

无需任何库，这仅仅是 JavaScript。如果需要，您可以使用 Modernizr 先用 Modernizr.localstorage 进行测试。

好的，这些都是技术细节，让我们看看网络上哪些地方可以使用、应该使用或正在使用它。希望这能激发您自己网站的一些想法。

正在使用 localStorage

Snapbird（一个强大的 Twitter 搜索工具）会记住您上次搜索的人员的流。可以想见，下次您回来时，您可能会搜索同一个人，这可以为您节省一秒钟。如果不是，您可以将其删除并替换。我发现它很有用，因为我通常试图找到自己以前发布的推文。

今年的 Webbie Madness 活动有一个大型的 March Madness 风格的投票网格，鼓励人们在多轮比赛中选择获胜者。第一轮有 32 人参加 16 场比赛。人们的名字被隐藏了。要弄清楚谁是谁以及决定投票给谁需要一段时间，而且这不是我能够一次完成的事情。我建议他们将投票结果保存到 localStorage 中，这样您就可以随时回来完成。就像真正的狠角色一样，他们做到了！

JSBin（由 Remy Sharp 创建，他也是 Snapbird 的开发者，可以想见）允许您保存您的初始 HTML/JavaScript 模板，以便下次您回来使用它时，可以使用相同的模板。

应该使用 localStorage

Typekit 在查看特定字体时有一个字体测试工具。您可以在框中输入自己的文本以查看该字体中的显示效果。不幸的是，当您切换到另一种字体时，您输入的自定义文本会消失。这将是 localStorage 的一个很好的使用案例。当该区域的值发生变化时，将其保存到 localStorage，并在页面加载时加载该值。我认为这将是一个很好的节省时间的方法，因为我认为在多个字体中查看文本是一种非常常见的用例。

CSS Lint 有一个复选框网格，用于您在测试 CSS 时是否希望 CSS Lint 检查哪些功能。如果它使用 localStorage 来记住您使用的复选框配置，那就太好了，这样如果您重新加载页面或稍后返回，它仍然是相同的。因此，如果您不喜欢“不要使用 ID”复选框，您可以将其永久关闭=）。

几乎任何具有登录表单的网站都可以使用 localStorage 来保存用户名。因此，当用户返回时，他们登录所需的步骤减少了一步。

Zeldman.com 在页脚中有一些链接，允许您在网站上使用的两种版本之间切换颜色。它将其保存为 Cookie，这很好，但容易受到 Cookie 的脆弱性的影响。任何具有备用样式选择（例如字体大小切换）的类似网站都可以将这些信息保存在 localStorage 中，并使其持久性更好。

更多

这仅仅是冰山一角。我相信拥有更多开发人员思维的人可以想到更大更好的想法。保存游戏进度？缓存资产？您还有什么想法？

来自 Mark Pilgrim 的更多信息。