Cookie 与本地存储

Web 开发社区中关于 Cookie 和本地存储的流言蜚语有很多，这也是一个常见的面试问题。让我们来揭秘一下这两种存储机制背后的概念吧！

Cookie 简介

Cookie 是存储在用户计算机上的小文件。它们用于存储大量特定于客户端和网站的数据，Web 服务器或客户端计算机均可访问它们。

• 这样做的原因是允许服务器提供针对特定用户的定制页面，或者页面本身可以包含一些知道 cookie 中的数据的脚本，因此它可以将信息从一次网站访问传递到下一次网站访问。
• 每个 cookie 实际上都是一个包含键和数据值对的小型查找表。
• Cookies主要用于服务器端读取。
• 在 HTML5 之前引入。
• 有有效期。
• 被 JS 清除，或者被浏览器的清除浏览数据清除，或者超过有效期。
• 将根据每个请求发送到服务器。
• 容量为4KB。
• 只有字符串可以存储在 cookie 中。
• Cookie 有两种类型：持久性 Cookie和会话 Cookie。

缺点：

• 每个域都将其所有 cookie 存储在一个字符串中，这会使解析数据变得困难。
• 数据未加密，这会成为一个问题，因为尽管数据量很小，但每次 HTTP 请求都会发送 cookie。
• 可以通过 cookie 执行 SQL 注入。
• 如果我们有不需要的 cookie，它们将与所有请求和响应一起发送，从而降低应用程序的速度。

LocalStorage 简介

localStorage 是存储接口的一个实现。它存储的数据没有过期日期，并且只能通过 JavaScript 或清除浏览器缓存/本地存储数据来清除——这与 Cookie 的过期不同。

• 每个域名的本地存储空间最大为5MB 。
• 本地存储只能被客户端读取。
• 随 HTML5 引入。
• 没有有效期。
• 通过JS或者浏览器的清除浏览数据来清除。
• 您可以选择何时必须将数据发送到服务器。
• 数据无限期存储并且必须是字符串。
• 仅有一种类型。
• 大多数现代浏览器都支持
• 同源规则适用于本地存储数据

如果您从“HTTP”切换到“HTTPS”安全协议，localStorage 将不可用，但 cookie 仍然可以访问。

缺点：

• 数据一旦存储，即为持久数据。应用程序有责任在使用后清理数据。
• localStorage 中存储的数据并不安全。切勿将敏感信息存储到 localStorage。

在以下链接中查找有关 cookie 和本地存储的更多信息：

• 曲奇饼
• 本地存储

如果你觉得这篇文章很有见地且很有帮助，请在评论区留言告诉我你的看法。如果你想联系我，请点击以下链接：

LinkedIn | GitHub | Twitter | StackOverflow