详解JS浏览器储存

引言

随着前端技术的深入，开发者接触到了多种浏览器存储方案，例如 Cookie 和 LocalStorage。这些方案在功能、限制及适用场景上存在显著差异，了解它们的异同点对于选择合适的存储策略至关重要。

Cookie

Cookie 的起源

Cookie 的设计初衷并非用于本地数据存储，而是为了解决 HTTP 协议的无状态特性，即用于识别用户身份。HTTP 协议本身不记录请求间的关联，服务器无法自动判断当前请求的用户是谁。例如，在购物车场景中，若没有 Cookie，服务器难以确认结账请求与之前添加商品请求的关联。Cookie 充当了请求的“身份证”，帮助服务器识别请求来源。

Cookie 的结构

直观地观察 Cookie 的形态有助于理解其结构。

以百度首页使用的 Cookie 为例，可以看到 Cookie 以 Name-Value（键值对）的形式存储在浏览器中，且 Value 部分通常经过加密处理。

Cookie 的生成方式

Cookie 是与域名绑定的。通过 Domain 属性可以确定 Cookie 的归属范围，例如百度首页的部分 Cookie 属于 .baidu.com 域名。

每个域名只能访问和操作属于自己域名的 Cookie，例如 baidu.com 无法访问 sougou.com 域名的 Cookie。然而，子域名可以读取父域名设置的 Cookie。例如，www.baidu.com 可以读取 Domain='.baidu.com' 的 Cookie。通过手动设置 Domain 属性，可以控制 Cookie 的可访问范围，如设置 Domain='baidu.com' 可使所有二级域名（*.baidu.com）都能读取该 Cookie。

//www.baidu.com

document.cookie='age=20;domain=.baidu.com'

// 此时 所有二级域名可以直接读取到这个 Cookie

Cookie 的生成方式主要分为服务器端生成和浏览器端生成两种。

服务器端生成：通过设置 HTTP 响应头中的 Set-Cookie 字段。

服务器可以通过响应头中的 Set-Cookie 指定存储的 Cookie 值。浏览器在接收到响应后，会根据 header 中的 set-cookie 值设置 Cookie。默认情况下，Domain 被设置为设置 Cookie 页面的主机名，但也可以手动指定 Domain 的值。

Set-Cookie: id=a3fWa;

浏览器端生成：在 JavaScript 中，可以通过 document.cookie 属性读写 Cookie，以键值对的形式展示。

document.cookie="id=a3fWa"
document.cookie='age=20;domain=.baidu.com'

Cookie 的应用场景

由于 Cookie 的主要作用是标识请求来源，其核心应用场景是保持用户登录状态（如记住密码）。此外，它还用于记录用户浏览数据、进行广告推送以及存储购物车信息等。

Cookie 的缺点

前文已提及，Cookie 存在明显的局限性。

容量限制

Cookie 会随每次请求发送，因此对其大小有严格限制。每个 Cookie 的大小限制为 4kb，这指的是单个 Name-Value 对的大小，而非整个域名下所有 Cookie 的总和。

性能问题

Cookie 与域名绑定，会随每个同域名的请求发送。然而，许多请求（如图片等静态资源）并不需要 Cookie。尽管单个 Cookie 仅 4kb，但累积起来会造成显著的网络资源浪费。

为了解决这一问题，可以将静态资源部署到 CDN 上。由于 CDN 域名与主站域名不同，静态资源请求不会附带 Cookie，从而避免不必要的传输。

安全性不足

正如前文所述，Cookie 在控制台中可见。虽然经过编码加密，但在 HTTP 传输过程中是明文传输的，脚本也能轻松获取 Cookie，存在被破解的风险。

在服务器端设置 Cookie 时，可以附加 HttpOnly 标记。这样，浏览器端的 JavaScript 无法通过 document.cookie 访问该 Cookie，从而提升安全性。

Set-Cookie: id=a3fWa; HttpOnly

标记为 Secure 的 Cookie 仅通过 HTTPS 加密请求发送。尽管如此，仍不建议使用 Cookie 存储敏感信息，因为其固有安全性不足，且这两个标记无法提供绝对的安全保障。

解决方案

鉴于 Cookie 的诸多缺点，可以采取“专业的人做专业的事”的策略来解决。

将用户登录态和部分用户信息的存储工作交给 Session，即 Cookie 仅存储一个用户唯一标识符（SessionID）。真正的信息存储在服务器端，通过 Cookie 中的 SessionID 在服务器端查找信息。这样，Cookie 的容量限制和安全问题便迎刃而解，因为此时 Cookie 中仅包含一串无意义的随机码。

本地存储的工作则交由 HTML5 中新增的本地存储解决方案“Web Storage”，它分为两类：localStorage 和 SessionStorage。接下来将介绍这两者。

LocalStorage

特点

• 数据长期保存，直到手动删除为止。
• 容量约为 5MB。
• 与 Cookie 类似，一个网站只能访问和操作自己域名下的数据。
• 仅在客户端使用，与服务器端无通信。
• 接口封装良好。
• 使用键值对保存信息。
• 同源窗口均可访问。

使用示例

LocalStorage 的使用非常便捷：

// 设置数据
localStorage.setItem("key","value");
//读取数据
let valueLocal = localStorage.getItem("key");

使用场景

基于上述特性，LocalStorage 非常适合用于本地缓存，以提高首屏加载速度。一些不常改变的大资源（如图片）也可以缓存下来，从而减少网络请求。

SessionStorage

特点

• 保存时间为本次会话，即窗口关闭后数据消失。
• 仅当前窗口可以访问，同源的其他窗口无法访问。
• 容量约为 5MB。

使用场景

SessionStorage 更适合存储与生命周期同步的会话级信息。这些信息仅适用于当前会话，例如可用于表单数据的持久化，防止刷新页面后数据丢失。

Cookie、LocalStorage 和 SessionStorage 的区别

作用域不同

这三者都遵循同源策略，即同协议、同域名、同端口下才能访问和修改同一份数据。唯一的区别在于 SessionStorage 还要求在同一窗口内。

生命周期不同

• Cookie 可以手动设置过期时间，默认生命周期为本次会话，窗口关闭时删除。若设置了过期时间，则数据会存储到硬盘中，直到过期时间到达才被删除。
• LocalStorage 是持久化的本地存储，除非手动删除，否则数据会一直存在。
• SessionStorage 是会话级别的存储，数据随窗口关闭而删除。

总结

以上介绍了几种常见的浏览器存储方案。在实际开发中，应根据各方案的特点选择合适的存储方式，适合的才是最好的。本文的重点总结如下：

• Cookie 的核心职责并非本地存储，而是“维持状态”。
• Web Storage 是 HTML5 专门为浏览器存储提供的数据存储机制，不与服务器端发生通信。

以上就是详解JS浏览器储存的详细内容，更多关于JS浏览器储存的资料请关注本站其它相关文章！