浏览器本地存储

🔍 什么是本地存储（Web Storage）？

Web Storage API 是 HTML5 提供的客户端存储机制，允许在用户的浏览器中以键值对形式保存数据。无需与服务器交互，适用于保存小量、非敏感的数据。

---

🧩 本地存储的两种类型

类型	名称	生命周期	可用大小	作用范围
localStorage	本地存储	永久（除非手动删除）	约 5~10MB	当前域名下共享
sessionStorage	会话存储	当前标签页关闭即失效	约 5MB	当前标签页下独立

📘 基本 API 语法（两种存储共用）

// 设置数据
localStorage.setItem('key', 'value')// 获取数据
const value = localStorage.getItem('key')// 删除某项
localStorage.removeItem('key')// 清空所有数据
localStorage.clear()// 获取 key 列表中的第 N 个键名
localStorage.key(index)// 获取数据长度（多少个键值）
localStorage.length

✅ sessionStorage 也完全相同，只需替换对象名即可。

📦 存储对象和数组的注意点（JSON）

Web Storage 只能存储字符串，如需存储对象或数组，需手动转换：

const user = { name: 'Alice', age: 22 }// 存储对象
localStorage.setItem('user', JSON.stringify(user))// 读取并还原对象
const stored = JSON.parse(localStorage.getItem('user'))
console.log(stored.name)  // Alice

🔐 localStorage vs sessionStorage 对比

功能	localStorage	sessionStorage
生命周期	永久保存（除非清除）	仅当前标签页，关闭即清除
跨页面共享	同源下全部页面可访问	不可共享（每标签页独立）
应用场景	登录状态、用户偏好	表单暂存、一步步流程等
安全性	较低，不适合存敏感数据	同样不安全

💡 localStorage 应用示例

✅ 用户偏好设置保存

// 夜间模式开关
function toggleDarkMode() {const isDark = document.body.classList.toggle('dark')localStorage.setItem('dark-mode', isDark)
}// 页面加载时自动应用
if (localStorage.getItem('dark-mode') === 'true') {document.body.classList.add('dark')
}

🚨 安全 & 限制注意事项

⚠️ 1. 不能存敏感数据（如密码、Token）
• localStorage 是明文可见，任何脚本或浏览器扩展都可读

⚠️ 2. 跨域限制
• Web Storage 是 同源策略 的（协议+域名+端口必须一致）

⚠️ 3. 存储空间有限
• 一般为 5MB，超出将触发 QuotaExceededError

⚠️ 4. 不能监听变化跨标签页同步（sessionStorage 完全不能）

🔄 监听 localStorage 改变（用于多标签同步）

window.addEventListener('storage', (event) => {console.log('Key changed:', event.key)console.log('New value:', event.newValue)
})

仅当不同标签页之间更改 localStorage 时才触发。

🧠 最佳实践总结

实践建议	描述
✅ 使用 JSON 存储结构化数据
✅ 设置命名空间（如：app_user_token）
✅ 页面加载时读取必要状态，如语言、暗黑模式
❌ 不存储敏感信息
❌ 不依赖 localStorage 实现身份认证（使用 Cookie + HttpOnly 更安全）

🚀 进阶替代方案

技术	特点
IndexedDB	更大容量、更复杂结构、异步操作
Cookies	可与服务端通信，但大小限制 4KB
Cache API	用于缓存资源文件（如 PWA）

Cookies

🍪 什么是 Cookie？

Cookie 是浏览器存储在用户计算机上的小型文本文件，通常用于：
• 保存登录状态
• 记录用户行为
• 与服务器共享状态信息

📏 Cookie 特点

特性	描述
大小限制	每个 Cookie 最多约 4KB
数量限制	每个域最多存 20-50 个 Cookie
作用域	绑定域名（可设置子域访问）
自动传输	每次请求自动随 header 发送给服务器（Cookie: …）
过期时间	可设置，默认是“会话级别”

🛠️ 设置/读取 Cookie 的基本语法（原生）

// 设置 cookie
document.cookie = "username=alice; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";// 读取 cookie
console.log(document.cookie) // 所有 cookie 字符串// 删除 cookie（通过设置过期时间）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"

⚠️ Cookie 是字符串拼接形式，使用麻烦，因此推荐封装或使用第三方库。

⚙️ 推荐使用封装工具（Vue 项目中更方便）

✅ 使用 js-cookie 库（轻量、好用）

安装：npm install js-cookie使用：import Cookies from 'js-cookie'// 设置
Cookies.set('token', 'abc123', { expires: 7 })  // 7 天过期// 读取
const token = Cookies.get('token')// 删除
Cookies.remove('token')

✅ 自动处理编码、过期、path 等问题

🔐 客户端 vs 服务端 Cookie

分类	前端 JS 可访问	会自动发送到服务器	示例
普通 Cookie	✅	✅	登录信息、语言设置
HttpOnly Cookie	❌（JS 不可读）	✅	安全的 Token 或会话标识（session id）
Secure Cookie	✅	✅（仅 HTTPS）	只在安全连接上传输

HttpOnly 和 Secure Cookie 只能由后端通过 Set-Cookie 设置，前端无法直接设置。

🧠 Cookie vs localStorage vs sessionStorage

特性	Cookie	localStorage	sessionStorage
最大容量	4KB	~5MB	~5MB
生命周期	可设置	永久	标签页关闭后清除
自动发送给服务器	✅	❌	❌
JS 可访问	✅（HttpOnly 不可）	✅	✅
典型用途	认证、会话	用户设置、缓存	表单暂存、临时状态

🧩 在 Vue 中使用 Cookie（组合示例）

// utils/cookie.js
import Cookies from 'js-cookie'export const setToken = (token) => Cookies.set('token', token, { expires: 7 })
export const getToken = () => Cookies.get('token')
export const removeToken = () => Cookies.remove('token')// 在组件中使用
import { getToken, setToken } from '@/utils/cookie'onMounted(() => {const token = getToken()if (token) {console.log('用户已登录，token:', token)}
})

🧱 服务端设置 Cookie（参考）

Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict

通常登录成功后，后端设置 Cookie 返回给浏览器，前端无需保存 token。