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 适用于多种实用场景：
Metafox企业内容管理系统0.9.1
下载
Metafox 是一个企业内容管理系统，使用一个特别的模板系统，你可通过一些特定的设计和代码来轻松创建 Web 网站，内容存储在 SQL 关系数据库，通过 Web 进行管理，简单、快速而且高效。 Metafox 0.9.1 发布，该版本改用一种更棒的 URL 风格，实现了 RSS 源（可包含远端网站内容到 Metafox 段中），重定向老的访问密钥到新的密钥，增加 RotateAntispam 技
- 记住用户主题偏好（如深色模式）
- 保存未提交的表单内容，防止意外关闭丢失
- 缓存 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 能显著提升用户体验，关键是理解它的持久性与局限性，结合实际需求灵活运用。
