前端面试题：关于 cookie、localStorage 和 sessionStorage 的区别

前端Chen
266 阅读3分钟

cookie, localStorage, sessionStorage 的区别

在前端开发中，cookie、localStorage 和 sessionStorage 都用于存储客户端的数据，它们的使用场景和特性各有不同。本文将对这三者进行对比，帮助大家更好地理解它们之间的差异及应用场景。

1. cookie

定义

cookie 是一种存储在浏览器中的小数据块，通常用于在客户端与服务器之间传递少量信息。

特点

  • 存储大小：每个 cookie 的大小限制为 4KB。
  • 过期时间：可以设置过期时间，默认情况下会在浏览器关闭后失效。通过设置 expires 或 max-age 属性，可以指定过期时间。
  • 作用域：cookie 会随着每个请求发送到服务器，因此适合用于需要与服务器进行数据交换的场景。
  • 跨域：cookie 会被发送到同一域名下的所有路径，但跨域请求时需要显式设置 withCredentials 标志。

示例

// 设置 cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// 获取 cookie
console.log(document.cookie);

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

2. localStorage

定义

localStorage 提供了在浏览器端持久存储数据的方式，存储的数据不会随浏览器关闭而删除。

特点

  • 存储大小：通常可存储约 5MB 的数据，具体大小取决于浏览器。
  • 过期时间：没有过期时间，存储的数据会永久存在，直到被手动删除。
  • 作用域：数据只在同一域名下可访问，不会随请求发送到服务器。
  • 跨域：不同的域名之间无法访问彼此的 localStorage 数据。

示例

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

// 获取 localStorage
console.log(localStorage.getItem("username")); // JohnDoe

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

// 清空所有 localStorage
localStorage.clear();

3. sessionStorage

定义

sessionStorage 与 localStorage 相似，但它的数据只在浏览器的会话期间存在，关闭浏览器或标签页后，数据将被清除。

特点

  • 存储大小：与 localStorage 相似，通常也是 5MB 左右。
  • 过期时间：数据只在会话期间有效，浏览器或标签页关闭后即清空。
  • 作用域：同一浏览器的同一标签页下共享数据，不同标签页之间的数据是隔离的。
  • 跨域：不同的域名之间无法访问彼此的 sessionStorage 数据。

示例

javascriptCopy Code
// 设置 sessionStorage
sessionStorage.setItem("username", "JohnDoe");

// 获取 sessionStorage
console.log(sessionStorage.getItem("username")); // JohnDoe

// 删除 sessionStorage
sessionStorage.removeItem("username");

// 清空所有 sessionStorage
sessionStorage.clear();

4. 总结

特性cookielocalStoragesessionStorage
存储大小4KB5MB左右5MB左右
过期时间可设置过期时间永久存储，除非手动删除会话结束后删除
数据传输到服务器每次请求都会随同请求发送到服务器不会随请求发送到服务器不会随请求发送到服务器
跨域访问同一域名下共享同一域名下共享同一浏览器标签页内共享
数据隔离同一域名下不同路径可共享不同域名之间无法共享不同标签页和窗口数据隔离

5. 使用场景

  • cookie：适合需要与服务器进行数据交换的场景，例如：身份验证信息（如 JWT token）或用户跟踪信息。
  • localStorage：适合存储不需要频繁与服务器交换的持久化数据，例如：保存用户设置、主题选择等。
  • sessionStorage：适合存储会话期间临时需要的数据，例如：表单临时数据或一次性操作的状态信息。

通过理解它们的区别和各自的优缺点，可以在开发中根据实际需求选择合适的存储方式。

avatar
文章
阅读
粉丝