重学 JS | cookie 和 localstorage 的哪个更安全？

Cookie 和 localstorage 都是客户端存储数据的方案，当然还有 SessionStorage 会话级的存储，这篇文章主要聊聊 Cookie 和 localstorage，整理总结下知识点，并回答下鹅厂关于此部分的面试题，二者怎么选择，哪个更安全？

Cookie

cookie，也叫做 HTTP cookie，通常由服务器对任意 Http 请求发送 Set-Cookie Http 头作为响应的一部分，其中包含会话信息。

基础构成如下：

Set-Cookie:name=test; Path=/; Domain=xx.com; Max-Age=2592000; HttpOnly; Secure; SameSite=None

名称：一个唯一确定的 Cookie 名称，不区分大小写，需要经过 URL 编码。

值：存在在 cookie 中的字符串值，需经过 URL 编码。

域（Domain）：配置 cookie 对哪个域有效。所有向该域发送的请求都会带上 cookie 信息，可以包含子域也可以不包含。没有设定，默认来自设置 cookie 的那个域。

路径(Path)：对于指定域中的那个路径，应该向服务器发送 cookie。

失效时间：表示 cookie 何时被删除的时间（停止向服务器发送 cookie 的时间）。默认情况下，浏览器会话结束时即删除所有 cookie 数据，不过也可以设置删除时间。配置删除时间后，cookie 可在浏览器关闭后仍然保存在用户机器上，前提是设置的时间是未过期时间。配置方式，Expires 属性指定的日期或在 Max-Age 属性指定的一段时间后删除。

安全标志(Secure)：指定后，cookie 只有在使用 SSL 连接的时候才发送服务器。

HttoOnly：JavaScript Document.cookie API 无法访问具有 HttpOnly 属性的 cookie。它仅发送到服务器。例如，持久化服务器端会话的 cookie 不需要对 JavaScript 可用，并且应该具有 HttpOnly 属性。此预防措施有助于缓解跨站点脚本（XSS）攻击。

URL 编码：encodeURIComponent（编码）/decodeURIComponent（解码）

Localstorage

H5 提出的持久化保存客户端数据的方案，不能给 localstorage 指定任何访问规则，只能按设定好的规则走。访问同一个 localstorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

SessionStorage

sessionStorage 对象存储特定于某个会话的数据，也就是数据只能保存到浏览器关闭。存储的数据可以跨越页面刷新而存在。因为 sessionStorage 对象绑定于某个服务器会话，所以当文件在本地运行的时候是不可用的。且数据只能由最初给对象存储数据的页面访问到，对多页面应用有限制。

Cookie 和 LocalStorage 的区别

Cookie 和 localStorage 均受到同源策略的保护，以防止不受相关域的访问。不同之处在于只能通过 JavaScript 访问 localStorage，Cookie 可通过 JavaScript 访问以及与每个 HTTP 请求一起发送。

与 cookie 相比，使用 localStorage 没有太多安全性好处。两者之间的差异是因为目标不同：localStorage 可用于仅在 JavaScript 中使用的内容，Cookie 还可用于在服务器上存储您所需的东西。可以访问用户计算机浏览器的任何人都可以访问这两者，并且可以通过在网页上执行的 JavaScript 来访问 localStorage 和 cookie。

浏览器以相同的方式存储 cookie 和本地存储中的数据。如果您担心存储在用户计算机上的数据的安全性，那么 LocalStorage 不会提供比 cookie 更安全的好处。实际上，这甚至可能会带来更大的风险，因为您可以将 Cookie 设置为在一定时间后过期，而 localStorage 不会过期。因此，与使用 cookie 相比，保存在 localStorage 中的数据在用户计算机上的保留时间可能更长。

至此完成了常用存储的知识学习。