【JS】在 JavaScript 中，cookie、session 和 localstorage 有什么区别？

一、区别

在 JavaScript 中，cookie、session 和 localstorage 都是用于在客户端存储数据的机制。它们之间存在以下区别

特性	cookie	session	localstorage
存储位置	浏览器端	服务器端	浏览器端
存储数据类型	字符串	字符串	字符串、对象、数组等
存储容量	4KB	不限制	5MB
生命周期	浏览器会话	会话结束后失效	除非手动删除，否则永久有效
跨域访问	支持	不支持	支持

二、具体使用场景

• cookie

  • 用于存储简单的用户信息，例如用户名、密码、购物车信息等。
  • 例如，在一个购物网站中，可以使用 cookie 来存储用户的购物车信息。

• session

  • 用于存储用户会话信息，例如用户登录状态、用户权限等。
  • 例如，在一个登录系统中，可以使用 session 来存储用户的登录状态。

• localstorage

  • 用于存储较大的数据，例如用户偏好设置、浏览历史等。
  • 例如，在一个网站中，可以使用 localstorage 来存储用户的偏好设置。

三、使用示例

以下是 cookie、session 和 localstorage 的使用示例：

cookie

// 设置 cookie
document.cookie = "username=JohnDoe";

// 获取 cookie
const username = document.cookie.split("=")[1];

// 删除 cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

session

// 设置 session
const session = new Session();
session.set("username", "JohnDoe");

// 获取 session
const username = session.get("username");

// 删除 session
session.clear();

localstorage

// 设置 localstorage
localStorage.setItem("username", "JohnDoe");

// 获取 localstorage
const username = localStorage.getItem("username");

// 删除 localstorage
localStorage.removeItem("username");