HTML5的WebStorage在Electron桌面端的数据持久化

Electron 中 localStorage 默认持久化且跨窗口共享，sessionStorage 仅限单窗口生命周期；数据存储于用户数据目录的 LevelDB 中，partition 配置影响隔离性，开发时需固定 userData 路径以防丢失。

Electron 应用中，WebStorage（localStorage 和 sessionStorage）默认是持久化的，但行为与浏览器有关键差异——它依赖于 Electron 的 用户数据目录（User Data Directory），且受主进程生命周期、多窗口、渲染进程隔离等影响。用对了能稳定存取，用错了容易“数据消失”或“跨窗口不同步”。

localStorage 在 Electron 中默认就是持久的

Electron 基于 Chromium，每个 BrowserWindow 实例在首次加载页面时，会自动关联到该应用的用户数据目录（如 ~/Library/Application Support/YourApp 或 %APPDATA%YourApp）。只要没手动清空或覆盖该目录，localStorage 数据就会随应用重启保留。

• 无需额外配置，开箱即用
• 数据以 LevelDB 格式存储在 Local Storage/ 子目录下（路径类似：UserDataDir/Local Storage/leveldb/）
• 同一应用所有窗口共享同一份 localStorage（前提是使用相同 partition，见下文）

注意 partition 配置：避免数据被隔离

Electron 默认使用 default partition，此时 WebStorage 正常共用。但如果在创建 BrowserWindow 时显式设置了 webPreferences.partition（比如 'persist:custom' 或 'some-name'），就相当于启用了独立的存储空间：

• partition: 'persist:myapp-cache' → 使用独立的 localStorage + IndexedDB + Cookies
• partition: 'temp'（无 persist: 前缀）→ 临时 partition，关闭所有相关窗口后数据自动清除
• 多个窗口若用了不同 partition，它们的 localStorage 完全不互通

建议：除非有明确隔离需求（如沙箱调试、多账号登录），否则保持默认或统一使用 partition: 'persist:main'。

立即学习“前端免费学习笔记（深入）”；

sessionStorage 是会话级的，但“会话”定义和浏览器不同

在 Electron 中，sessionStorage 的生命周期绑定到单个 BrowserWindow 渲染进程实例，而非传统意义上的“标签页”：

• 窗口关闭 → 对应的 sessionStorage 数据立即销毁
• 页面 location.reload() 或导航到同域其他页面 → 数据保留
• 同一窗口内打开新 window.open() 子窗口 → 子窗口有自己独立的 sessionStorage（不继承父窗口）

因此，不要依赖 sessionStorage 在多个窗口间传递临时状态；需要跨窗口暂存，改用 localStorage 或主进程 IPC + 共享内存变量。

常见问题与稳妥做法

遇到“数据不见了”，大概率是以下原因：

• 开发时反复 npm start 启动，但未指定 app.setPath('userData', ...) → 每次启动可能生成新用户目录，旧数据还在上一个目录里
• 打包后应用名变更（如从 MyApp 改为 MyApp-Pro）→ Electron 视为新应用，新建 userData 目录
• 调用了 session.clearStorageData() 或手动删了 Local Storage/ 文件夹
• 渲染进程崩溃或异常退出，极少数情况下 LevelDB 写入未完成（概率低，但可加 try/catch + 简单校验）

稳妥建议：

• 开发期固定 userData 路径：app.setPath('userData', path.join(app.getAppPath(), 'data'))（仅限开发调试，发布时移除）
• 敏感或关键数据，仍建议用主进程管理（如 fs.promises.writeFile 存 JSON 到 app.getPath('userData')）
• 首次读取 localStorage 时做格式校验，失败则降级初始化