javascript - 缓存变量：localStorage 还是 cookie？

Question

这是对这个问题的跟进，在那里我可以选择制作 cookie 和使用localStorage在多个会话中保留变量。谁能给我两者的优缺点，以及选择哪一个的建议？

Answer 1

我会选择localStorage。

优点

• 快速轻松地读取/写入您的数据
• 您的数据不会随着减少负载的每个请求一起传输到服务器
• 键值对时尚

缺点

• 旧浏览器不支持
• 每个域最多可存储5 MB数据

当涉及到 cookie 时，它​​们有时会很有用。购物车是一种场景，当您想要在用户关闭浏览器/会话后恢复购物车项目时，cookie 非常有用。但是，不要存储太多 cookie，因为它们会随着您发出的每个请求而传输到服务器（它也包括 AJAX 请求）。当/如果您的网站变得流行并且每小时/每天获得数千/数十万次点击时，这可能会导致严重的瓶颈。想想看。

希望能帮助到你。

Answer 2

其他人尚未提及的要点以粗体显示：

• 每个页面请求都会将 Cookies 发送到服务器，而 localStorage 则不会。这意味着：
  • 当您只在客户端需要它时，没有不必要的数据传输
  • 但是当您需要服务器上的值时，需要在页面加载后使用额外的 XmlHttpRequest 进行传输
• localStorage 的容量要大得多
• 许多实现 localStorage 的浏览器没有禁用它的选项，或者这个选项比阻止 cookie 的选项隐藏得更好，所以更少的用户禁用它（许多了解 cookie 的人甚至不知道这个功能的存在）。
• 在我看来，localStorage 有一个更容易使用的 API
• localStorage 没有 expire-header（但是可以通过向数据添加额外的 expire-date 并手动处理来轻松模拟）

顺便说一句：不要忘记 sessionStorage。API 是相同的，在很多情况下它比持久化的 localStorage 更合适

Answer 3

我只想列出我想到的4点：

1. localStorage 不会随每个请求一起旅行。它保持在 cient 方面（这很好，更精简的要求）
2. 比 Cookie 具有更大的大小限制（您可以存储更多）
3. 更容易获取/设置值的 API (IMO)
4. 存储在 localStorage 中的值不会传送到服务器。如果您需要了解存储在服务器端的值，请使用 cookie。

您决定什么最适合您的方案。

Answer 4

localStorage较新，部分 HTML5 和较旧的浏览器可能不支持它。它也只是客户端，这意味着除非某些客户端代码将其显式发送到服务器，否则您的服务器将永远不会看到它。该界面非常易于使用，而且速度非常快。

Cookie 受到普遍支持，并随着每个请求自动发送到服务器。但是客户端和服务器都可以访问 cookie 值，而无需额外的工作。在一些库的帮助下，管理来自 JavaScript 的 cookie 的界面非常迟钝。

如果该值只需要是本地的，并且不需要考虑旧的浏览器支持，请使用localStorage.