html5离线存储规范

HTML5 离线存储规范详解

本地存储（localStorage）与会话存储（sessionStorage）

核心特性对比
| 特性 | localStorage | sessionStorage |
|———————|———————————-|———————————|
| 生命周期 | 永久有效（直到手动清除） | 会话级有效（页面关闭即清除） |
| 作用域 | 同源窗口/标签页共享 | 当前窗口/标签页独立 |
| 数据持久性 | 浏览器关闭后仍保留 | 浏览器关闭后清除 |
| 存储容量 | 约5MB（浏览器依赖） | 约5MB（浏览器依赖） |
| 同步机制 | 异步存储（部分浏览器可能同步） | 异步存储（部分浏览器可能同步） |

API 接口

• setItem(key, value)：设置键值对（value需转为字符串）
• getItem(key)：获取指定键的值
• removeItem(key)：删除指定键值对
• clear()：清空所有存储数据
• key(index)：按索引获取键名（从0开始）
• length：获取存储数据数量

存储事件

• storage 事件：当其他页面修改存储数据时触发（当前页面不触发自己的修改）
• 事件对象包含：
  • oldValue：修改前的值
  • newValue：修改后的值
  • url：触发修改的文档地址

与其他存储方式对比

使用注意事项

1. 数据类型限制：所有值都以字符串形式存储，需手动序列化/反序列化对象（如JSON.stringify()）
2. 同源限制：严格遵循同源策略，无法跨域名访问
3. 存储空间：多数浏览器限制为5MB左右，Chrome可通过命令行参数扩展至更大空间
4. 隐私安全：数据不会被自动发送到服务器，但需防范XSS攻击导致的数据泄露
5. 浏览器兼容：IE8+支持，移动端浏览器普遍支持（建议检测typeof localStorage !== 'undefined'）

典型应用场景

• 用户偏好设置持久化（如主题模式、语言选择）
• 离线表单数据暂存
• 跨标签页数据共享（如购物车状态同步）
• 轻量级缓存（配合serviceWorker实现PWA）

常见问题与解答

Q1：如何检测浏览器是否支持localStorage？
A：可通过以下代码检测：

if (typeof localStorage === 'object') {
  // 支持localStorage
} else {
  // 不支持，提供降级方案
}

Q2：如何批量清除所有本地存储数据？
A：直接调用localStorage.clear()方法即可清空所有数据，若需逐条确认，可通过循环删除：

for (let i = localStorage.length 1; i >= 0; i--) {
  localStorage.removeItem(localStorage.key(i));