网站建设业务客户来源dede网站模板
浏览器的存储机制 - Storage
- 前言
- 一、核心概念与区别
- 二、常用 API
- 1、存储数据（setItem(key, value)）
- 2、 获取数据（getItem(key)）
- 3、删除单个数据（removeItem(key)）
- 4、清空所有数据（clear()）
- 5、遍历所有键（key(index) 或 Object.keys()）
- 三、使用场景
- LocalStorage
- SessionStorage
- <font color=red> 四、注意事项
- 1、数据类型限制
- 2、安全性
- 3、 性能与使用建议
- 五、与 Cookie 的对比
- 总结
前言
在前端开发中，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
- 持久化用户配置：记住用户的主题偏好、语言设置等。
- 缓存简单数据：缓存频繁访问但不敏感的数据（如登录令牌，需配合安全措施）。
- 离线功能：配合 Service Worker 实现离线应用的数据存储。
SessionStorage
- 临时表单数据：存储用户在当前页面填写的表单数据，防止刷新页面丢失。
- 单页应用（SPA）状态：存储当前路由的临时状态（如搜索条件），避免路由切换时数据丢失。
- 敏感数据临时存储：存储一次性使用的敏感数据（如临时验证码），关闭页面后自动清除。
四、注意事项
1、数据类型限制
- 仅支持存储 字符串，存储对象或数组时需通过
JSON.stringify()和JSON.parse()转换：
// 错误：直接存储对象会转为 [object Object]
localStorage.setItem('user', { name: 'Alice' }); // 正确：先序列化
localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
2、安全性
- 不加密存储：数据以明文存储，禁止存储敏感信息（如密码、支付信息）。
- 同源策略：仅同域名下的页面可访问，不同子域名也无法共享（如 a.example.com 和 b.example.com 不共享）。
- XSS 风险：存储的数据可能被恶意脚本读取，需避免信任不可控的输入。
3、 性能与使用建议
- 同步阻塞：API 为同步操作，大量数据存储可能阻塞主线程，建议分批次处理。
- 存储容量限制：避免存储过大数据，超出限制会抛出 QuotaExceededError 异常。
- 监听数据变化：可通过 storage 事件监听同一域名下其他窗口的存储变化（SessionStorage 不触发此事件）：
window.addEventListener('storage', (event) => {console.log(`键 ${event.key} 的值从 ${event.oldValue} 变为 ${event.newValue}`);
});
五、与 Cookie 的对比
总结
LocalStorage 和 SessionStorage 是前端轻量级存储的核心工具，适用于
非敏感数据 的持久化或临时存储。使用时需注意数据类型转换、安全性和存储容量，结合业务场景选择合适的存储方式。