localStorage / sessionStorage 简介

localStorage 和 sessionStorage 是 HTML5 提供的浏览器端本地存储机制，用于在用户浏览器中存储键值对数据。

共同特点

特点 说明
容量 通常 5MB 左右（远大于 Cookie 的 4KB）
存储位置 浏览器本地，不会自动发送到服务器
数据类型 只能存储字符串（对象需 JSON.stringify 序列化）
同源策略 仅同源（相同协议+域名+端口）页面可访问
API 一致 两者的操作方法完全相同

核心区别

对比项 localStorage sessionStorage
生命周期 永久保存，除非手动清除 会话级别，关闭标签页/窗口即清除
作用域 同源下所有标签页共享 仅当前标签页独享（同源不同标签页不共享）
适用场景 长期保存的数据（用户偏好、主题设置） 临时数据（表单草稿、一次性 Token）

基本操作

// 存储数据
localStorage.setItem('username', '张三')
sessionStorage.setItem('token', 'abc123')

// 存储对象（需序列化）
const user = { name: '张三', age: 25 }
localStorage.setItem('user', JSON.stringify(user))

// 读取数据
const name = localStorage.getItem('username')
const userData = JSON.parse(localStorage.getItem('user'))

// 删除单个数据
localStorage.removeItem('username')

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

// 获取存储数量
console.log(localStorage.length)

// 遍历所有数据
for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i)
    console.log(key, localStorage.getItem(key))
}

应用场景

localStorage 适合

场景 说明
用户偏好设置 主题色、字体大小、语言选择
购物车数据 未登录状态下的购物车内容
离线缓存 接口数据缓存，减少请求
历史记录 搜索历史、浏览记录

sessionStorage 适合

场景 说明
表单草稿 用户填写一半的表单数据
页面间传参 同一标签页内多页面共享临时数据
一次性登录标记 OAuth 流程中的临时 state 值
单页应用路由状态 页面刷新前的临时状态

安全性注意事项

风险 说明 防御
XSS 攻击 恶意脚本可读取所有 localStorage 数据 敏感数据使用 HttpOnly Cookie
明文存储 数据以明文保存在浏览器中 敏感数据加密后再存储
无过期机制 localStorage 不会自动过期 自行实现过期检查逻辑
同源共享 同源所有页面都可访问 避免存储跨页面敏感数据 
// 安全建议：不要存储敏感信息
localStorage.setItem('token', 'abc123')  // ❌ 敏感数据
localStorage.setItem('theme', 'dark')    // ✅ 非敏感数据

与 Cookie 的对比

对比项 Cookie localStorage sessionStorage
容量 4KB 5MB 5MB
自动发送 ✅ 每次请求自动携带 ❌ 不会自动发送 ❌ 不会自动发送
生命周期 可设置过期时间 永久 标签页关闭即清除
作用域 同源+路径 同源 同源+当前标签页
HTTP Only ✅ 支持 ❌ 不支持 ❌ 不支持
操作方式 服务器/客户端均可 仅客户端 仅客户端

监听存储变化

// 当其他标签页修改 localStorage 时触发（同源）
window.addEventListener('storage', (event) => {
    console.log('key:', event.key)       // 被修改的键名
    console.log('oldValue:', event.oldValue)  // 旧值
    console.log('newValue:', event.newValue)  // 新值
    console.log('url:', event.url)       // 触发修改的页面URL
})

浏览器查看方式

打开开发者工具 → Application / 存储 面板：

  • Local Storage → 查看当前域名下的 localStorage
  • Session Storage → 查看当前域名下的 sessionStorage

小结

localStorage 是浏览器的”永久储物柜”，关了浏览器东西还在；sessionStorage 是”临时寄存箱”，关掉标签页就清空。 两者都只能存字符串，敏感数据别往里放。