深入理解 localStorage
localStorage 是浏览器提供的一种客户端存储机制，用于在用户浏览器中存储键值对数据。与 cookie 相比，它提供了更大的存储容量（通常为 5-10MB），并且不会随 HTTP 请求发送到服务器，因此更适合存储应用程序不需要与服务器共享的数据。
核心特性
-
持久性：
- 数据不会过期，除非手动删除
- 关闭浏览器或标签页后数据仍然保留
-
域隔离：
- 每个域名有独立的 localStorage
- 不同域名之间无法互相访问
-
存储限制：
- 大多数浏览器限制为 5-10MB（以字符串长度计算）
- 超出限制会抛出
QuotaExceededError
-
数据类型：
- 只能存储字符串
- 对象和数组需要使用
JSON.stringify和JSON.parse进行转换
基本操作
存储数据
localStorage.setItem('key', 'value');// 存储对象示例
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));获取数据
const value = localStorage.getItem('key');// 获取对象示例
const user = JSON.parse(localStorage.getItem('user'));
console.log(user.name); // 输出: "John"删除数据
// 删除单个项
localStorage.removeItem('key');// 清空所有项
localStorage.clear();遍历所有项
for (let i = 0; i < localStorage.length; i++) {const key = localStorage.key(i);const value = localStorage.getItem(key);console.log(`${key}: ${value}`);
}实际应用场景
1.记住用户偏好：
// 保存主题选择
const saveTheme = (theme) => {localStorage.setItem('appTheme', theme);
};// 获取主题选择
const getTheme = () => {return localStorage.getItem('appTheme') || 'light';
};2. 缓存 API 响应：
const fetchData = async (url) => {const cached = localStorage.getItem(url);if (cached) {return JSON.parse(cached);}const response = await fetch(url);const data = await response.json();localStorage.setItem(url, JSON.stringify(data));return data;
};3.会话管理：
// 登录时存储令牌
const login = (token) => {localStorage.setItem('authToken', token);
};// 检查是否已登录
const isLoggedIn = () => {return !!localStorage.getItem('authToken');
};4.离线应用：
// 保存表单数据，防止意外丢失
const saveFormData = (formData) => {localStorage.setItem('formDraft', JSON.stringify(formData));
};// 恢复表单数据
const restoreFormData = () => {return JSON.parse(localStorage.getItem('formDraft'));
};注意事项与最佳实践
-
错误处理：
- 存储数据时可能会超出容量限制
- 某些浏览器隐私模式下 localStorage 可能不可用
const safeSetItem = (key, value) => {try {localStorage.setItem(key, value);} catch (e) {console.error('LocalStorage error:', e);// 可以实现降级策略，如使用内存缓存}
};
-
性能考虑：
- 避免存储大量数据或频繁读写
- localStorage 操作是同步的，可能阻塞主线程
-
数据安全：
- 数据以明文形式存储，容易被脚本读取
- 不要存储敏感信息（如密码、信用卡号）
