HTML5 Web Storage（和cookie对比）Web Storage（包括 localStorage 和 se

Web Storage（包括 localStorage 和 sessionStorage），是 HTML5 新增的客户端存储方案，相比 Cookie 更易用、存储容量更大，是前端本地存储的核心技术。

一、Web Storage 核心概念

Web Storage 是浏览器提供的键值对形式的本地存储机制，分为两个核心对象：

特性	`localStorage`	`sessionStorage`
生命周期	永久存储，除非手动删除	会话级存储，关闭标签页 / 浏览器即失效
存储容量	约 5-10MB（远大于 Cookie 的 4KB）	同 localStorage
作用域	同源（协议 + 域名 + 端口）下所有标签页共享	仅当前标签页（即使同源，不同标签页不共享）
数据持久化	页面刷新、浏览器重启后仍存在	页面刷新后仍存在，标签页关闭则清空

二、基础使用方法（通用 API）

localStorage 和 sessionStorage 拥有完全相同的操作 API，语法简单且无需手动封装，开箱即用：

1. 完整操作示例

运行

// ==================== 1. 存储数据（支持字符串/数字/布尔，复杂数据需序列化） ====================
// 存储基础类型
localStorage.setItem('username', 'zhangsan'); // 键：username，值：zhangsan
sessionStorage.setItem('isLogin', 'true'); // 注意：值只能是字符串，布尔/数字需手动转换

// 存储复杂类型（对象/数组）：需用 JSON.stringify 序列化
const userInfo = { id: 1001, name: '张三', age: 20 };
localStorage.setItem('userInfo', JSON.stringify(userInfo));

// ==================== 2. 获取数据 ====================
// 获取基础类型
const username = localStorage.getItem('username'); // 输出：zhangsan
const isLogin = sessionStorage.getItem('isLogin') === 'true'; // 转换为布尔值

// 获取复杂类型：需用 JSON.parse 反序列化
const savedUser = JSON.parse(localStorage.getItem('userInfo'));
console.log(savedUser.name); // 输出：张三

// 获取不存在的键：返回 null
const nonExist = localStorage.getItem('abc'); // 输出：null

// ==================== 3. 修改数据（直接覆盖） ====================
localStorage.setItem('username', 'lisi'); // 覆盖原有值，username 变为 lisi

// ==================== 4. 删除数据 ====================
// 删除单个键
localStorage.removeItem('username');

// 清空所有存储
localStorage.clear();
sessionStorage.clear();

// ==================== 5. 遍历所有数据 ====================
// 方法1：通过 key() 获取指定索引的键
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}

// 方法2：遍历 Object.keys
Object.keys(localStorage).forEach(key => {
  console.log(`${key}: ${localStorage.getItem(key)}`);
});

2. 简化写法（非标准但常用）

除了 setItem/getItem，也可以像操作普通对象一样读写（注意键名不能是 API 名如 length/key）：

运行

localStorage.age = 20; // 等价于 setItem('age', '20')
console.log(localStorage.age); // 等价于 getItem('age')，输出：20
delete localStorage.age; // 等价于 removeItem('age')

三、关键注意事项

数据类型限制：
- 仅能存储字符串，存储数字、布尔、对象、数组时，需手动用 JSON.stringify 序列化，读取时用 JSON.parse 反序列化；
- 反序列化空值（如 getItem 返回 null）时会报错，建议加容错：
  
  运行
```
const data = JSON.parse(localStorage.getItem('key') || 'null');
```
同源策略限制：
- 只有协议、域名、端口完全相同的页面才能共享 Web Storage；
- 例如 http://example.com 和 https://example.com 属于不同源，无法共享；http://example.com:8080 和 http://example.com:3000 也无法共享。
存储容量限制：
- 单域名下约 5-10MB（不同浏览器略有差异），远大于 Cookie 的 4KB；
- 超出容量会抛出 QuotaExceededError 错误，建议存储前做容量检查。
安全性：
- 数据存储在客户端，可被用户手动修改 / 删除，不能存储敏感数据（如密码、token）；
- 易受 XSS 攻击（恶意脚本可通过 localStorage 窃取数据），需做好 XSS 防护（如输入过滤、转义）。
与 Cookie 的核心区别：
- Cookie 会随每次 HTTP 请求发送到服务器，Web Storage 仅在本地存储，不参与网络传输；
- Cookie 容量约 4KB，Web Storage 容量更大；
- Cookie 可设置 HttpOnly 防止 JS 访问，Web Storage 完全由 JS 控制，无此保护。

四、典型使用场景

场景	推荐使用	原因
页面主题 / 语言偏好	localStorage	永久保存，用户下次打开页面仍生效
表单临时缓存（如草稿）	sessionStorage	仅当前会话有效，关闭标签页自动清空，避免残留
非敏感用户信息（如昵称）	localStorage	容量大，无需随请求发送，减轻服务器压力
单页应用（SPA）状态	localStorage	页面刷新后保留状态，提升用户体验

总结

核心特性：Web Storage 包含 localStorage（永久存储）和 sessionStorage（会话存储），API 简单易用，存储容量远大于 Cookie；
使用要点：仅能存储字符串，复杂数据需用 JSON 序列化 / 反序列化，受同源策略限制，不能存储敏感数据；
核心差异：与 Cookie 相比，Web Storage 不参与 HTTP 请求传输，容量更大，更适合本地存储非敏感数据。