localStorage提供持久化存储，容量大且不发送至服务器，适合存用户偏好等非敏感数据；通过setItem、getItem等方法操作字符串数据，复杂类型需用jsON转换；可用于记住主题、缓存表单或API数据；受同源策略限制，不支持跨标签实时通信，需处理无痕模式异常。
html5 的 localStorage 提供了一种简单而有效的方式，让网页能在用户的浏览器中持久保存数据。与 cookie 不同，localStorage 容量更大（通常为 5-10MB），不会随请求发送到服务器，适合存储用户偏好、表单数据或离线内容。
localStorage 基本用法
localStorage 是一个键值对存储系统，所有数据以字符串形式保存。常用方法包括：
- setItem(key, value)：保存数据
- getItem(key)：读取数据
- removeItem(key)：删除某条数据
- clear()：清空所有数据
示例代码：
// 保存数据 localStorage.setItem('username', 'Alice'); localStorage.setItem('age', '28'); // 读取数据 const name = localStorage.getItem('username'); // "Alice" // 删除数据 localStorage.removeItem('age'); // 清空全部 localStorage.clear();
存储复杂数据类型
localStorage 只支持字符串，若要保存数组或对象，需使用 json.stringify() 转换，读取时用 JSON.parse() 还原。
立即学习“前端免费学习笔记（深入）”；
const user = { name: 'Bob', preferences: ['dark-mode', 'notifications'] }; // 存储对象 localStorage.setItem('user', JSON.stringify(user)); // 读取并解析 const savedUser = JSON.parse(localStorage.getItem('user')); console.log(savedUser.name); // "Bob"
实际应用场景
localStorage 适用于多种实用场景：
- 记住用户主题偏好（如深色模式）
- 保存未提交的表单内容，防止意外关闭丢失
- 缓存 API 数据，提升页面加载速度
- 记录用户操作历史或最近访问内容
例如，实现表单自动保存：
const form = document.getElementById('myForm'); const input = document.getElementById('message'); // 恢复上次输入 input.value = localStorage.getItem('draft') || ''; // 实时保存 input.addEventListener('input', () => { localStorage.setItem('draft', input.value); });
注意事项与限制
使用 localStorage 需注意以下几点：
- 数据永久保存，除非手动清除，不适合敏感信息（如密码）
- 同源策略限制：只能被同一域名下的页面访问
- 不支持跨标签页实时通信，但可通过 storage 事件监听变化
- 在无痕模式或禁用情况下可能不可用，建议加异常处理
安全写法示例：
try { localStorage.setItem('test', '1'); localStorage.removeItem('test'); } catch (e) { console.warn('localStorage 不可用'); }
基本上就这些。合理使用 localStorage 能显著提升用户体验，关键是理解它的持久性与局限性，结合实际需求灵活运用。