localStorage持久化核心是存对、读准、容错稳：必须JSON序列化对象，读取时判空并try-catch处理异常，仅适用于非敏感轻量缓存场景。
用 localstorage 实现前端数据持久化，核心就三点：存得对、读得准、容错稳。它不依赖后端，不需额外库，浏览器原生支持，但细节没处理好，数据就容易“凭空消失”或解析报错。
只存字符串，对象数组必须序列化
localStorage 只接受字符串作为值，直接传对象、数组、布尔或数字会自动调用 .toString()，导致数据失真甚至无法还原。
- ❌ 错误写法：
localStorage.setItem('user', {name: 'Tom'})→ 存进去的是"[object Object]" - ✅ 正确做法：存前用 JSON.stringify()，取后用 JSON.parse()
localStorage.setItem('user', JSON.stringify({name: 'Tom', age: 30}))const user = JSON.parse(localStorage.getItem('user') || 'null') - 注意：
getItem返回null时直接JSON.parse(null)会报错，务必加空值判断或默认值
读写操作必须加 try-catch 容错
localStorage 写入可能静默失败——无痕模式禁用、存储超限（5–10 MB）、iOS Safari 低内存自动清理等，都会让 setItem 抛异常。
- 保存时包裹
try...catch，识别QuotaExceededError和通用DOMException - 读取时先判断是否为
null，再尝试解析，避免JSON.parse(null)或损坏字符串引发错误 - 示例封装函数：
function saveToStorage(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
} catch (e) {
console.warn(`存储失败 [${key}]:`, e.message);
}
}
function loadFromStorage(key, defaultValue = null) {
const raw = localStorage.getItem(key);
if (!raw) return defaultValue;
try {
return JSON.parse(raw);
} catch (e) {
console.warn(`解析失败 [${key}]:`, e.message);
return defaultValue;
}
}
页面加载时自动恢复数据
用户刷新页面后，要让 DOM 状态和 localStorage 数据保持一致，关键在「DOMContentLoaded」或「window.onload」阶段执行恢复逻辑。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 比如动态表格：先从 storage 读出原始数据数组，再遍历生成
<tr>并插入到<tbody> - 比如日程表：按时间 ID（如
"9AM"）读取对应事件文本，填入对应<textarea> - 避免重复渲染：可加标记位或清空容器后再重建，防止旧 DOM 残留
别把它当数据库用，明确适用边界
localStorage 是轻量本地缓存，不是持久化数据库，使用前需确认场景是否合适：
立即学习“前端免费学习笔记（深入）”；
- ✔️ 合适：用户填写的表格行、待办清单、界面主题偏好、日程草稿、搜索历史
- ❌ 不适合：密码、token、银行卡号等敏感信息（不加密、易被脚本读取）
- ❌ 不适合：需跨设备同步、强一致性、事务回滚的业务数据
- ⚠️ 注意：同源限制严格，
https://a.com和https://www.a.com视为不同源，数据不共享
