Web Storage 是 HTML5 引入的一种浏览器存储机制，用于在客户端存储数据，提供了比传统 Cookie 更安全、更高效的本地存储方案。
一、Web Storage 的类型
Web Storage 主要包含两种存储方式：
1. localStorage
生命周期：持久化存储，除非手动清除，否则数据会一直保留在浏览器中。
作用域：同一协议、同一域名、同一端口下的所有窗口和标签页共享。
存储大小：通常为 5MB 左右（不同浏览器可能略有差异）。
2. sessionStorage
生命周期：会话期间存储，当浏览器窗口或标签页关闭时，数据会被清除。
作用域：仅在创建它的浏览器窗口或标签页中有效，不跨窗口共享。
存储大小：与 localStorage 类似，通常为 5MB 左右。
二、Web Storage API
localStorage、sessionStorage这两种存储方式共享相同的 API：
1. 设置数据
使用 setItem API 来设置数据：
// localStorage
localStorage.setItem('key', 'value');
// sessionStorage
sessionStorage.setItem('key', 'value');2. 获取数据
使用 getItem API 来获取数据：
// localStorage
const value = localStorage.getItem('key');
// sessionStorage
const value = sessionStorage.getItem('key');3. 删除数据
使用 removeItem API 来删除数据：
// localStorage
localStorage.removeItem('key');
// sessionStorage
sessionStorage.removeItem('key');4. 清除所有数据
使用 clear API 来清除所有数据
// localStorage
localStorage.clear();
// sessionStorage
sessionStorage.clear();5. 获取所有键
使用 for 循环 + getItem + key API 获取所有键
// localStorage
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
console.log(key, value);
}
// // sessionStorage（同上）三、存储复杂数据
Web Storage 只能存储字符串数据，若要存储对象或数组，需要使用 JSON 进行序列化和反序列化：
示例：存储或获取对象
// 存储对象
const user = { name: '张三', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
// 获取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出：张三四、localStorage 与 sessionStorage 的区别
特性 | localStorage | sessionStorage |
|---|---|---|
生命周期 | 持久化，除非手动清除 | 会话期间 |
作用域 | 同一域名下的所有窗口 | 仅当前窗口/标签页 |
数据共享 | 跨窗口共享 | 不跨窗口共享 |
关闭浏览器 | 数据保留 | 数据清除 |
五、与 Cookie 的比较
特性 | Web Storage | Cookie |
|---|---|---|
存储大小 | 约 5MB | 约 4KB |
数据传输 | 不会发送到服务器 | 每次请求都会发送到服务器 |
存储类型 | 仅字符串（可通过 JSON 存储复杂类型） | 字符串 |
过期时间 | localStorage 需手动清除，sessionStorage 会话结束清除 | 可设置过期时间 |
作用域 | 同域名下 | 可设置路径和域名 |
API | 简洁易用 | 需要自己封装 |
六、使用场景
6.1 localStorage 适用场景：
存储用户偏好设置（如主题、语言）。
缓存不经常变化的数据（如城市列表）。
持久化用户登录状态（需注意安全。
6.2 sessionStorage 适用场景
存储表单临时数据（防止页面刷新丢失）。
存储会话期间的临时状态。
多步骤表单数据暂存。
七、注意事项
存储限制：避免存储过大数据，超出限制会抛出异常。
安全性：
不要存储敏感信息（如密码、令牌）。
数据可被用户手动修改，需在服务器端验证。
跨域限制：遵循同源策略，不同域名无法访问彼此的 Web Storage.
数据类型：仅支持字符串，复杂类型需序列化。
浏览器兼容性：IE8+ 支持，现代浏览器均支持。
八、存储事件
当 Web Storage 数据发生变化时，会触发 storage 事件，可用于监听存储变化：
window.addEventListener('storage', (event) => {
console.log('存储键:', event.key);
console.log('旧值:', event.oldValue);
console.log('新值:', event.newValue);
console.log('存储区域:', event.storageArea);
console.log('源域名:', event.url);
});注意：storage 事件仅在同一域名下的其他窗口触发，当前窗口修改存储不会触发此事件。
总结
Web Storage 提供了一种高效、安全的客户端存储方案，通过 localStorage 和 sessionStorage 满足不同的存储需求。合理使用 Web Storage 可以减少网络请求，提升用户体验，但需注意存储限制和安全问题。
