LocalStorage 是浏览器提供的持久化存储方案，用于保存少量字符串数据。它支持 setItem、getItem、removeItem 和 clear 等 API，可实现数据的增删查改；只能存储字符串，对象需通过 JSON.stringify 转换；遵循同源策略，容量为 5-10MB；常用于存储用户偏好如主题设置，并可通过安全封装处理异常，但不宜存放敏感信息或大量数据。
HTML5 的 LocalStorage 是一种在浏览器中持久存储数据的简单方式，适合保存少量字符串数据。它不需要请求服务器，页面刷新或关闭后依然保留，非常适合做本地配置、用户偏好或临时缓存。
LocalStorage 基本特性
LocalStorage 有以下几个关键特点：
- 数据永久保存，除非手动清除（不会随页面关闭丢失）
- 只能存储字符串类型，其他类型需转换为 JSON 字符串
- 同源策略限制：仅能在同一协议、域名、端口下访问
- 容量一般为 5-10MB，具体取决于浏览器
- 操作简单，原生 JavaScript 支持，无需引入库
常用API操作方法
LocalStorage 提供了几个核心方法来增删查改数据：
保存数据：setItem()使用 localStorage.setItem(key, value) 存入数据，value 必须是字符串。
立即学习“前端免费学习笔记（深入）”；
例如保存用户名称：
localStorage.setItem('username', '张三');
如果要保存对象，先用 JSON.stringify() 转换：
const user = { name: '李四', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
读取数据：getItem()
通过 localStorage.getItem(key) 获取数据，返回字符串或 null（未找到）。
const name = localStorage.getItem('username');
console.log(name); // 输出：张三
如果是之前存的对象，需要用 JSON.parse() 还原：
const userData = localStorage.getItem('user');
if (userData) {
const user = JSON.parse(userData);
console.log(user.name); // 输出：李四
}
删除数据：removeItem()
删除指定键的数据：
localStorage.removeItem('username');
清空所有数据：clear()
清空当前域名下的所有 LocalStorage 数据（慎用）：
localStorage.clear();
实战示例：记住用户偏好主题
一个常见的使用场景是记住用户的界面主题选择（比如深色/浅色模式）。
HTML 结构：
当前主题将在此显示
JavaScript 实现：
// 获取元素
const app = document.getElementById('app');
const toggleBtn = document.getElementById('theme-toggle');
// 启动时检查是否有保存的主题
const savedTheme = localStorage.getItem('theme') || 'light';
app.className = savedTheme;
// 更新按钮文字
toggleBtn.textContent = savedTheme === 'dark' ? '切换为浅色' : '切换为深色';
// 切换主题函数
function toggleTheme() {
const currentTheme = localStorage.getItem('theme') || 'light';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
// 更新页面样式
app.className = newTheme;
// 保存到 LocalStorage
localStorage.setItem('theme', newTheme);
// 更新按钮文字
toggleBtn.textContent = newTheme === 'dark' ? '切换为浅色' : '切换为深色';
}
// 绑定点击事件
toggleBtn.addEventListener('click', toggleTheme);
配合简单的 CSS：
#app {
padding: 20px;
transition: background 0.3s;
}
#app.dark {
background: #333;
color: white;
}
#app.light {
background: #f9f9f9;
color: black;
}
这样用户下次打开页面时，会自动加载上次选择的主题。
注意事项与最佳实践
虽然 LocalStorage 使用方便，但也有几点需要注意：
- 不要存储敏感信息（如密码、token），容易被 XSS 攻击窃取
- 非响应式，无法监听外部修改（可用 StorageEvent 监听同源其他页面变化）
- 同步操作，大量数据可能阻塞主线程
- 不支持过期机制，需要自己实现 TTL（比如存入时间戳）
- 注意异常处理，某些浏览器隐私模式可能禁用或抛错
可以加个安全封装：
function setSafeItem(key, value) {
try {
localStorage.setItem(key, JSON.stringify(value));
} catch (e) {
console.warn('LocalStorage 写入失败:', e);
}
}
function getSafeItem(key) {
try {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : null;
} catch (e) {
console.warn('读取 LocalStorage 失败:', e);
return null;
}
}
基本上就这些。LocalStorage 上手快，适合轻量级本地存储需求，合理使用能显著提升用户体验。
