缓存变量:localStorage或cookie

Caching a variable: localStorage or a cookie?

本文关键字：cookie localStorage 变量 缓存      更新时间：2023-09-26

这是对这个问题的后续回答，在这个问题中，我被要求在制作cookie和使用localStorage在几个会话中保持变量之间做出选择。有人能告诉我这两种方法的优缺点，并建议我选择哪一种吗?

我用 localStorage 。

优点

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

缺点

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

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

希望能有所帮助。

其他人未提及的点以粗体:

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

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

更合适

我只列出我想到的四点:

  1. localStorage不会随每个请求一起传输。它留在客户端(这很好，更精简的请求)
  2. 具有比Cookie更大的大小限制(您可以存储更多)
  3. 更容易的API获取/设置值(IMO)
  4. 存储在localStorage中的值不会传递给服务器。如果您需要知道存储在服务器端的值，那么使用cookie。

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

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

如果值只需要是本地的，并且旧的浏览器支持不是问题，使用localStorage

相关文章：