缓存变量：localStorage还是cookie？

Question

这是this问题的后续问题，我可以选择制作Cookie并使用localStorage来保留多个会话的变量。有人可以给我两者的优点和缺点，并建议选择哪一个？

Answer 1

我选择 localStorage 。

<强>赞成

• 对数据进行快速简便的读/写访问
• 您的数据不会随着减少负载的每个请求一起传输到服务器
• 键值对时尚

<强> CONS

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

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

希望它有所帮助。

Answer 2

其他人尚未提及的内容以粗体显示：

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

顺便说一下：不要忘记sessionStorage 。 API是相同的，并且在许多情况下它比持久性localStorage

更合适

Answer 3

我只会想出4点：

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

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

Answer 4

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

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

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