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

Question

localStorage、sessionStorage、session 和 cookie 的技术优缺点是什么，我什么时候应该使用其中一种？

Answer 1

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

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

localStorage、sessionStorage 和 cookie 都是客户端存储解决方案。 session 数据保存在您直接控制的服务器上。

localStorage 和 sessionStorage

localStorage 和 sessionStorage 是相对较新的 API(意思是，并非所有旧浏览器都支持它们)并且几乎相同(API 和功能)，唯一的异常(exception)是持久性。 sessionStorage(顾名思义)仅在浏览器 session 期间可用(并在选项卡或窗口关闭时被删除) - 但是，它可以在页面重新加载后继续存在(来源 DOM Storage guide - Mozilla Developer Network)。

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

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

cookies

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

从积极的方面来说，cookie 可以通过设置一个仅限 HTTP 的标志来防止跨站点脚本 (XSS)/脚本注入(inject)等安全风险，这意味着现代(支持)浏览器将阻止从 JavaScript 访问 cookie 和值(这也将阻止您自己的合法 JavaScript 访问它们)。这对于身份验证 cookie 尤其重要，它用于存储包含登录用户详细信息的 token - 如果您拥有该 cookie 的副本，那么就所有意图和目的而言，就 Web 应用程序而言，您将成为该用户相关，并拥有与用户相同的数据和功能访问权限。

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

localStorage 与 sessionStorage 与 Cookies

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

客户端与服务器端

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

由于 session 数据完全由您的应用程序(服务器端)控制，因此它是任何本质上敏感或安全的最佳位置。

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

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

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

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