localStorage、sessionStorage、session 和 cookie 有什么区别？

Question

localStorage , sessionStorage , session 和 cookies 的技术优势和劣势是什么？

原文由 Pank 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个范围极其广泛的问题，很多优点/缺点都与具体情况有关。

在所有情况下，这些存储机制将特定于单个计算机/设备上的单个浏览器。任何跨会话持续存储数据的要求都需要涉及您的应用程序服务器端——很可能使用数据库，但也可能使用 XML 或文本/CSV 文件。

localStorage、sessionStorage、cookies都是客户端存储方案。会话数据保存在您直接控制的服务器上。

本地存储和会话存储

localStorage 和 sessionStorage 是相对较新的 API（这意味着，并非所有旧版浏览器都支持它们）并且几乎相同（在 API 和功能方面），唯一的例外是持久性。 sessionStorage（顾名思义）仅在浏览器会话期间可用（并在选项卡或窗口关闭时被删除）——然而，它在页面重新加载后仍然存在（来源 DOM 存储指南 - Mozilla 开发者网络）。

显然，如果您存储的数据需要持续可用，那么 localStorage 比 sessionStorage 更可取 - 尽管您应该注意两者都可以被用户清除，因此您不应该依赖任何一种情况下数据的持续存在。

localStorage 和 sessionStorage 非常适合在页面之间保存客户端脚本中所需的非敏感数据（例如：首选项、游戏分数）。存储在 localStorage 和 sessionStorage 中的数据可以很容易地从客户端/浏览器中读取或更改，因此不应依赖于存储应用程序中的敏感或安全相关数据。

饼干

这对于 cookie 也是如此，这些可以被用户轻易篡改，并且数据也可以以纯文本形式从中读取 - 所以如果你想存储敏感数据，那么会话确实是你唯一的选择。如果你没有使用 SSL，cookie 信息也可以在传输过程中被拦截，尤其是在开放的 wifi 上。

积极的一面是，cookie 可以通过设置 HTTP only 标志来一定程度地保护免受跨站点脚本 (XSS)/脚本注入等安全风险，这意味着现代（支持）浏览器将阻止从 JavaScript 访问 cookie 和值（这也将阻止您自己的合法 JavaScript 访问它们）。这对于身份验证 cookie 尤其重要，它用于存储包含登录用户详细信息的令牌 - 如果您有该 cookie 的副本，那么无论出于何种意图和目的，您都将 成为 该用户，只要 Web 应用程序是关注，并拥有与用户相同的数据和功能访问权限。

由于 cookie 用于身份验证目的和用户数据的持久性， 所有 对页面有效的 cookie 都从浏览器发送到服务器，用于对同一域的 每个 请求 - 这包括原始页面请求、任何后续 Ajax 请求、所有图像、样式表、脚本和字体。因此，不应使用 cookie 来存储大量信息。浏览器还可能对可存储在 cookie 中的信息的大小施加限制。通常，cookie 用于存储用于身份验证、会话和广告跟踪的标识令牌。令牌本身通常不是人类可读的信息，而是链接到您的应用程序或数据库的加密标识符。

localStorage 与 sessionStorage 与 Cookies

在功能方面，cookies、sessionStorage 和 localStorage 只允许您存储字符串 - 可以在设置时隐式转换原始值（这些将需要转换回以在读取后用作它们的类型）而不是对象或数组（可以使用 API 对它们进行 JSON 序列化以存储它们）。会话存储通常允许您存储服务器端语言/框架支持的任何原语或对象。

客户端与服务器端

由于 HTTP 是一种无状态协议 - Web 应用程序无法通过以前访问过的用户返回网站来识别用户 - 会话数据通常依赖于 cookie 令牌来识别重复访问的用户（尽管很少 URL 参数可用于同一个目的）。数据通常有一个滑动的到期时间（每次用户访问时更新），并且根据您的服务器/框架，数据将存储在进程中（意味着如果 Web 服务器崩溃或重新启动，数据将丢失）或在外部状态服务器或数据库。这在使用网络农场（给定网站的多个服务器）时也是必要的。

由于会话数据完全由您的应用程序（服务器端）控制，因此它是任何敏感或安全性质的最佳场所。

服务器端数据的明显缺点是可伸缩性——在会话期间每个用户都需要服务器资源，并且客户端所需的任何数据都必须随每个请求一起发送。由于服务器无法知道用户是否导航到另一个站点或关闭他们的浏览器，因此会话数据必须在给定时间后过期，以避免所有服务器资源被放弃的会话占用。因此，在使用会话数据时，您应该意识到数据可能会过期和丢失，尤其是在具有长表单的页面上。如果用户删除他们的 cookie 或切换浏览器/设备，它也会丢失。

一些 Web 框架/开发人员使用隐藏的 HTML 输入将数据从表单的一页保存到另一页，以避免会话过期。

localStorage、sessionStorage 和 cookie 都受“同源”规则的约束，这意味着浏览器应该阻止访问除设置信息开始的域之外的数据。

有关客户端存储技术的进一步阅读，请参阅 Dive Into Html 5 。

原文由 pwdst 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

1. 本地存储

优点：

1. Web 存储可以简单地看作是对 cookie 的改进，提供了更大的存储容量。如果您查看 Mozilla 源代码，我们可以看到 5120KB （ 5MB 在 Chrome 上等于 250 万个字符）是整个域的默认存储大小。与典型的 4KB cookie 相比，这为您提供了更多的工作空间。
2. 数据不会针对每个 HTTP 请求（HTML、图像、JavaScript、CSS 等）发送回服务器 - 减少了客户端和服务器之间的流量。
3. 存储在 localStorage 中的数据一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该站点。

缺点：

1. 它适用于 同源策略。因此，存储的数据只能在同一来源上使用。
2. 饼干

优点：

1. 与其他人相比，AFAIK 没有什么。

缺点：

1. 4K 限制是针对整个 cookie，包括名称、值、到期日期等。为了支持大多数浏览器，请将名称保持在 4000 字节以下，并将整体 cookie 大小保持在 4093 字节以下。
2. 对于每个 HTTP 请求（HTML、图像、JavaScript、CSS 等），数据都会发送回服务器 - 增加了客户端和服务器之间的流量。

通常，允许执行以下操作：

• 总共 300 个 饼干
• 每个 cookie 4096 字节
• 每个域 20 个 cookie
• 每个域 81920 字节（给定 20 个最大大小为 4096 = 81920 字节的 cookie。）

1. 会话存储

优点：

1. 它类似于 localStorage 。
2. 数据不是持久的，即数据仅在每个窗口（或 Chrome 和 Firefox 等浏览器中的选项卡）可用。数据仅在页面会话期间可用。所做的更改将保存并可用于当前页面，以及将来在同一选项卡/窗口上访问该站点。选项卡/窗口关闭后，数据将被删除。

缺点：

1. 数据仅在设置它的窗口/选项卡内可用。
2. 就像 localStorage 一样，它适用于 同源策略。因此，存储的数据只能在同一来源上使用。

Checkout 跨选项卡- 如何促进跨源浏览器选项卡之间的轻松通信。

原文由 softvar 发布，翻译遵循 CC BY-SA 4.0 许可协议