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 结构：
<button id="theme-toggle">切换主题</button> <div id="app">当前主题将在此显示</div>
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 上手快，适合轻量级本地存储需求，合理使用能显著提升用户体验。