localStorage提供持久化存储，容量大且操作简便，支持键值对存取、复杂数据JSON转换、跨标签页监听及兼容性处理，适用于用户偏好等非敏感数据缓存。
HTML5 提供了强大的本地存储能力，其中 localStorage 是最常用的一种方式。它允许我们在浏览器中持久保存数据，即使关闭页面或重启浏览器，数据依然存在。相比 Cookie，localStorage 容量更大（通常为 5-10MB），操作更简单，且不会随请求发送到服务器。
一、localStorage 基本操作方法
localStorage 是一个全局对象，提供以下核心方法来操作数据：
- setItem(key, value)：保存数据，以键值对形式存储字符串。
- getItem(key)：根据键获取对应的值，不存在则返回 null。
- removeItem(key)：删除指定键的存储项。
- clear()：清空所有存储的数据。
- key(index)：获取指定索引位置的键名，用于遍历。
// 存储数据
localStorage.setItem('username', '张三');
localStorage.setItem('age', '25');
// 读取数据
const name = localStorage.getItem('username'); // "张三"
const age = localStorage.getItem('age'); // "25"
// 删除某一项
localStorage.removeItem('age');
// 清空全部
localStorage.clear();
二、存储复杂数据类型（如对象、数组）
localStorage 只能存储字符串，如果要保存对象或数组，需要先转换成 JSON 字符串。
正确做法：
const user = { name: '李四', city: '北京', hobbies: ['读书', '游泳'] };
// 存储对象 → 转为 JSON 字符串
localStorage.setItem('user', JSON.stringify(user));
// 读取时 → 解析回对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // "李四"
注意：使用 JSON.parse() 读取前应判断值是否存在，避免解析 null 报错。
立即学习“前端免费学习笔记（深入）”；
const data = localStorage.getItem('user');
const user = data ? JSON.parse(data) : null;
三、监听存储变化（跨标签页通信）
当在一个浏览器标签页中修改 localStorage 时，可以通过 storage 事件 在其他打开的同源页面中监听到变化。
// 在另一个标签页中监听变化
window.addEventListener('storage', function (e) {
if (e.key === 'username') {
console.log('用户名已更新为：', e.newValue);
}
});
注意：
- 当前操作 localStorage 的页面不会触发 storage 事件。
- 仅在同源的不同标签页之间生效。
四、实用技巧与注意事项
- 所有数据都以字符串形式存储，数字、布尔等类型读取后需手动转换。
- 建议对 key 进行命名规范，如添加前缀
app_避免冲突。 - 注意浏览器隐私模式下可能禁用 localStorage，操作前可做兼容性检查。
- 敏感信息不建议明文存储，可结合简单加密处理。
if (typeof localStorage !== 'undefined') {
// 支持 localStorage
} else {
// 不支持，可降级使用 Cookie 或内存存储
}
基本上就这些。localStorage 使用简单，适合保存用户偏好、表单缓存、登录状态等非敏感数据，合理使用能显著提升用户体验。 
