HTML5本地存储可用localStorage或indexedDB实现离线日历数据缓存：localStorage适合轻量场景，以JSON字符串存取日程数组，需注意容量限制与同步阻塞问题；indexedDB更推荐用于生产环境，支持事务、索引与大量数据查询，并配合Service Worker和后台同步策略保障离线优先与数据一致性。
HTML5 本地存储可通过 localStorage 或 indexedDB 实现离线日历日程数据的持久缓存，核心是把用户添加、修改、删除的日程以结构化方式保存在浏览器端，页面加载时优先读取本地数据，联网后再同步到服务器。
用 localStorage 存储简单日程数据（适合轻量场景）
localStorage 支持字符串键值对，适合存储 JSON 格式的日程数组。注意它有容量限制（通常 5–10MB），且不支持事务和复杂查询。
- 保存日程：将日程列表转为 JSON 字符串后存入，例如：
localStorage.setItem('calendarEvents', JSON.stringify(eventsArray)); - 读取日程：页面初始化时解析并渲染：
const events = JSON.parse(localStorage.getItem('calendarEvents') || '[]'); - 增删改后及时更新本地缓存，避免丢失（如调用
saveToStorage()函数封装写入逻辑） - 建议为每条日程添加
id和updatedAt字段，便于后续与服务端做增量同步
用 indexedDB 存储复杂日程（推荐用于生产环境）
indexedDB 是浏览器内置的异步、事务型数据库，支持索引、大量数据和离线查询，更适合日历这类需按日期范围检索、频繁增删的场景。
- 创建数据库并定义 Object Store（如
events），设置主键（如id）和时间索引（如date或startAt） - 插入/更新日程使用
put()，删除用delete()，按日期查可用index.openCursor()或index.getAll() - 封装通用操作函数，比如：
addEvent({ id, title, startAt, endAt, description })getEventsByDateRange('2024-06-01', '2024-06-30') - 配合 Service Worker 可实现真正离线访问：拦截日历页面请求，返回缓存的 HTML + 从 indexedDB 读取的数据
离线优先 + 后台同步策略
仅缓存不够，还需处理网络恢复后的数据一致性。
立即学习“前端免费学习笔记（深入）”；
- 所有写操作先更新本地存储（
localStorage或indexedDB），再尝试发请求到服务端 - 失败时标记该条日程为
pending: true，并记录操作类型（add/update/delete） - 监听
online事件，触发同步队列：逐条提交 pending 操作，成功后清除标记；失败则重试或提示用户 - 服务端需支持幂等接口（如用唯一
clientEventId避免重复插入）
补充：避免常见坑
-
localStorage是同步阻塞 API，大数据量序列化/反序列化可能卡 UI，建议只存 ID 列表，详情走 indexedDB - 不同域名或协议（http/https）间 localStorage 不共享；同源但子域不同需显式设置
document.domain（已不推荐） - 用户手动清除浏览数据会丢失所有本地缓存，关键日程应有导出（JSON 文件）和导入功能作为兜底
- 移动端 Safari 对 indexedDB 的支持较新（iOS 10.3+），旧版本可降级到 localStorage + 简单结构
