localStorage是办公场景首选，因其同步读取、本地持久、5MB容量充足、全平台兼容，完美适配静态低频配置项如主题、语言、字号等秒级生效需求。

Web Storage 是离线 Web 办公应用中配置与状态管理的底层基石，不负责缓存页面或网络资源，但承担着“用户意图即时响应”的关键角色——比如切换主题、记住最近打开的文档、保存草稿自动恢复、保留语言偏好等。它不是万能的离线方案，却是最轻量、最确定、最无需等待的那部分。

为什么 localStorage 是办公场景首选

办公类应用的配置项（如字号、深色模式、默认视图、快捷键开关）具备三个典型特征：静态、低频变更、需秒级生效。localStorage 完美匹配：

• 读取是同步的，getItem() 返回即用，不卡 UI、不触发 loading 状态
• 数据存在本地，无网络依赖，开机/重开浏览器后仍可立即读取
• 5MB 容量足够存数百个键值对，且 iOS Safari、Android Chrome、Edge 全系支持，无兼容性包袱
• 同源隔离，不同办公子系统（如邮件、日历、文档）互不干扰

sessionStorage 的精准适用场景

它适合那些“仅本次操作有效”的临时状态，天然契合办公流程中的会话边界：

• 表单草稿：新建会议邀请时中途关闭标签页，再次进入可自动恢复未提交内容
• 多步骤向导：审批流中每一步的中间选择，离开当前流程即自动清理
• 临时筛选条件：在文档列表页设置“按修改时间排序”，切换到其他模块后该排序不延续

它和 Service Worker 的分工很清晰

离线办公不能只靠 Web Storage，但它的不可替代性在于“状态先行”：

• Service Worker 负责缓存 HTML/CSS/JS/图标等静态资源，解决“页面能不能打开”
• localStorage 负责加载后“用户看到什么、怎么交互”，比如深色模式一开就生效，无需等样式重载
• 两者配合：SW 确保页面快速呈现，localStorage 确保呈现的内容符合用户习惯

实际落地要注意的细节

用得好是利器，用错容易引发一致性问题：

• 避免直接存对象，用 JSON.stringify / JSON.parse 处理复杂值，否则取出来是 [object Object]
• 敏感字段（如 token、密钥）不要放 localStorage，它不加密、可被脚本读取
• 监听 storage 事件，实现多标签页间配置同步（例如 A 标签页切了语言，B 标签页自动响应）
• 首次加载时做兜底：若 localStorage 为空，用合理默认值初始化，再写入，避免空状态异常