JavaScript Cookie vs 会话 vs 本地存储

在 JavaScript 中，我们经常需要在不同的网页之间保存数据或状态。而为了实现这个目的，我们可以使用 Cookie、会话和本地存储等不同的方式。在本文中，我们将从以下几个方面来比较它们的差异：

• 储存容量
• 生命周期
• 可访问性
• 安全性
• API 使用

储存容量

Cookie、会话和本地存储都有不同的储存容量限制。具体地说：

• Cookie 在每个网址，每个浏览器和每个设备上都有大小限制。通常情况下，Cookie 的大小限制为 4096 字节左右，但不同浏览器和设备可能有所不同。
• 会话储存是基于浏览器会话的，它使用一个单独的对象来储存数据，所以储存的容量没有明确的限制。但一旦浏览器会话结束，数据也会随之销毁。
• 本地存储的容量限制则取决于浏览器和设备的版本和类型。通常情况下，本地存储的限制为 5~10 MB。

生命周期

Cookie、会话和本地存储也有不同的生命周期。具体地说：

• Cookie 拥有自己的生命周期，可以根据需求设置过期时间。一旦过期，它将被浏览器自动清除。
• 会话储存的生命周期仅限于浏览器会话。一旦会话结束，数据就会被清除。
• 本地存储也拥有自己的生命周期，它不仅可以设置过期时间，还可以设置永久存储，即关闭浏览器后重新打开时数据依然存在。

可访问性

Cookie、会话和本地存储也有不同的可访问性。具体地说：

• Cookie 可以被服务器和客户端脚本同时访问。
• 会话储存只能在当前浏览器窗口内访问。
• 本地存储可以在当前浏览器窗口以及其他窗口和标签页之间共享。

安全性

在安全性方面，Cookie、会话和本地存储都有不同的应用场景。具体地说：

• Cookie 可以设置 SameSite 属性，以限制 Cookie 的跨站点使用。此外，Cookie 还可以使用 HttpOnly 属性，以防止客户端脚本访问它。
• 会话储存的数据仅在当前窗口内可见，因此它相对较安全。但如果窗口被劫持，数据也会被劫持。
• 本地存储可以使用 HTTPS 加密，以及使用 localStorage 和 sessionStorage 可以设置权限，限制数据的访问。

API 使用

最后，我们来看看 Cookie、会话和本地存储的 API 使用方式：

Cookie

// 设置 Cookie
document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

// 读取 Cookie
var x = document.cookie;

// 删除 Cookie
document.cookie = "name=; expires=date; path=path; domain=domain; secure";

会话储存

// 将数据保存到会话储存中
sessionStorage.setItem("key", "value");

// 从会话储存中读取数据
var x = sessionStorage.getItem("key");

// 从会话储存中删除数据
sessionStorage.removeItem("key");

// 清空会话储存中的所有数据
sessionStorage.clear();

本地存储

// 将数据保存到本地存储中
localStorage.setItem("key", "value");

// 从本地存储中读取数据
var x = localStorage.getItem("key");

// 从本地存储中删除数据
localStorage.removeItem("key");

// 清空本地存储中的所有数据
localStorage.clear();

综上，我们可以根据需求选择合适的存储方式：如果需要进行跨站点数据交互，可以使用 Cookie；如果仅需在当前窗口内传递数据，可以使用会话储存；如果需要在各个窗口之间共享数据，则可以使用本地存储。在使用时，也应该注意安全性和限制，以确保数据的安全和合理使用。