浏览器的存储机制 - Storage

前言

在前端开发中，Storage 是浏览器提供的用于在客户端存储数据的机制，包括 LocalStorage 和 SessionStorage。它们通过 Window 对象的属性暴露，支持以**键值对**形式存储数据，适用于
不需要频繁与服务器交互 的轻量级数据存储。

位置在 F12开发者工具 ——》 Application ——》 Storage

一、核心概念与区别

二、常用 API

两者的 API 完全一致，通过 window.localStorage 和 window.sessionStorage 调用。

1、存储数据（setItem(key, value)）

// 存储字符串
localStorage.setItem('theme', 'dark'); // LocalStorage
sessionStorage.setItem('searchQuery', '前端'); // SessionStorage

// 存储对象（需先转为JSON字符串）
const user = { id: 1, name: 'Alice' };
localStorage.setItem('user', JSON.stringify(user));

2、 获取数据（getItem(key)）

const theme = localStorage.getItem('theme'); // "dark"
const searchQuery = sessionStorage.getItem('searchQuery'); // "前端"

// 解析JSON对象
const user = JSON.parse(localStorage.getItem('user')); // { id: 1, name: 'Alice' }

3、删除单个数据（removeItem(key)）

localStorage.removeItem('theme'); // 删除LocalStorage中的theme键
sessionStorage.removeItem('searchQuery'); // 删除SessionStorage中的searchQuery键

4、清空所有数据（clear()）

localStorage.clear(); // 清空当前域名下的所有LocalStorage数据
sessionStorage.clear(); // 清空当前标签页的所有SessionStorage数据

5、遍历所有键（key(index) 或 Object.keys()）

// 方法1：通过索引遍历（兼容性好）
for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i); // 获取第i个键名
  const value = localStorage.getItem(key);
  console.log(`${key}: ${value}`);
}

// 方法2：转为对象遍历（ES6+）
const storageKeys = Object.keys(localStorage);
storageKeys.forEach(key => {
  const value = localStorage.getItem(key);
});

三、使用场景

LocalStorage

1. 持久化用户配置：记住用户的主题偏好、语言设置等。
2. 缓存简单数据：缓存频繁访问但不敏感的数据（如登录令牌，需配合安全措施）。
3. 离线功能：配合 Service Worker 实现离线应用的数据存储。

SessionStorage

• 临时表单数据：存储用户在当前页面填写的表单数据，防止刷新页面丢失。
• 单页应用（SPA）状态：存储当前路由的临时状态（如搜索条件），避免路由切换时数据丢失。
• 敏感数据临时存储：存储一次性使用的敏感数据（如临时验证码），关闭页面后自动清除。

四、注意事项

1、数据类型限制

• 仅支持存储 字符串，存储对象或数组时需通过 JSON.stringify() 和 JSON.parse() 转换：

// 错误：直接存储对象会转为 [object Object]
localStorage.setItem('user', { name: 'Alice' }); 

// 正确：先序列化
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));

2、安全性

1. 不加密存储：数据以明文存储，禁止存储敏感信息（如密码、支付信息）。
2. 同源策略：仅同域名下的页面可访问，不同子域名也无法共享（如 a.example.com 和 b.example.com 不共享）。
3. XSS 风险：存储的数据可能被恶意脚本读取，需避免信任不可控的输入。

3、 性能与使用建议

1. 同步阻塞：API 为同步操作，大量数据存储可能阻塞主线程，建议分批次处理。
2. 存储容量限制：避免存储过大数据，超出限制会抛出 QuotaExceededError 异常。
3. 监听数据变化：可通过 storage 事件监听同一域名下其他窗口的存储变化（SessionStorage 不触发此事件）：

window.addEventListener('storage', (event) => {
  console.log(`键 ${event.key} 的值从 ${event.oldValue} 变为 ${event.newValue}`);
});

五、与 Cookie 的对比

总结

LocalStorage 和 SessionStorage 是前端轻量级存储的核心工具，适用于
非敏感数据 的持久化或临时存储。使用时需注意数据类型转换、安全性和存储容量，结合业务场景选择合适的存储方式。