web localStorage和sessionStorage的关系和区别

经验与学习　2024/12/3 9:22:00　　点击：不统计

localStorage、sessionStorage 和 cookie 都是浏览器提供的用于存储客户端数据的机制，它们在用途、生命周期、存储大小以及数据传输方式上各有不同。

1. localStorage

特点

存储大小：通常为 5MB（因浏览器而异）。

生命周期：数据长期保存，除非手动删除，否则即使关闭浏览器也不会清除。

作用域：同源（protocol + domain + port）下共享，支持跨页面监听key变动事件，有用于登录等跨页面变动监控。

数据类型：仅支持字符串（可以通过 JSON.stringify 和 JSON.parse 存储和解析复杂数据）。

使用场景

适合存储需要长期保留的数据，比如用户偏好设置、主题选择等。

操作案例：

// 设置
localStorage.setItem('key', 'value');

// 获取
let value = localStorage.getItem('key');

// 删除
localStorage.removeItem('key');

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

2. sessionStorage

特点

存储大小：通常为 5MB（因浏览器而异）。

生命周期：仅在当前会话中有效，关闭浏览器或标签页时会清除。

作用域：同源（protocol + domain + port）下的单个标签页独享，无法跨标签页访问。

数据类型：仅支持字符串。

使用场景

适合存储临时数据，比如表单输入、页面会话状态等。

操作案例：

// 设置
sessionStorage.setItem('key', 'value');

// 获取
let value = sessionStorage.getItem('key');

// 删除
sessionStorage.removeItem('key');

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

3. cookie

特点

存储大小：最大约 4KB。

生命周期：可由开发者通过 expires 或 max-age 设置。如果未设置，默认为会话级别，浏览器关闭时清除。

作用域：同源共享，支持跨子域传递（通过设置 domain 属性）。

数据传输：每次请求时都会自动发送给服务器，增加请求大小，适合存储需要服务器读取的数据。

数据类型：仅支持字符串。

使用场景

适合存储需要在客户端和服务端之间传递的小量数据，比如用户登录状态、会话信息等。

操作案例：

// 设置
document.cookie = "key=value; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

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

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

总结

localStorage：适合长期存储的、无需频繁变动的客户端数据,支持跨页面监听key变动事件，有用于登录等跨页面变动监控。

sessionStorage：适合临时性、会话级别的数据存储。

cookie：适合需要与服务器交互的小数据存储，但由于其体积限制和传输机制，较少用于现代前端存储。

·上一篇：网站架构 >> 　　　·下一篇：现高并发web服务 >>