当前位置：首页 > news >正文

JavaScript 存储对象 sessionStorage （会话存储）和 localStorage（本地存储）

news 2025/6/25 14:07:40

深入理解 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);// 可以实现降级策略，如使用内存缓存}
};