indexeddb天然离线可用，数据存于浏览器本地，关网后仍可读写；但完整离线体验需service worker、cache api与indexeddb协同；离线写入需加syncstatus字段并幂等同步；注意各浏览器兼容性与存储上限限制。
IndexedDB 本身就是在浏览器本地运行的数据库，不依赖网络，所以它天然就是离线可用的——但“能离线”不等于“自动离线可靠”，关键在你怎么用。
IndexedDB 的数据存在哪？关掉网络后还能读写吗
IndexedDB 数据完全保存在用户浏览器的本地存储空间里（路径类似 chrome://settings/siteData 或 about:storage），和网络状态无关。只要页面已加载、脚本可执行，indexedDB.open() 就能打开数据库、增删查改。
常见误判场景：
- 页面本身是远程 HTML（比如
https://example.com/app.html），关网后根本打不开——这不是 IndexedDB 的问题，是 HTML 文件没缓存 - JS 脚本或初始化逻辑从 CDN 加载，关网后执行中断，
indexedDB.open()根本没跑起来 - 代码里写了
fetch()后才调用 IndexedDB，错误地把网络请求当成前置条件
只用 IndexedDB 不够：离线体验闭环缺哪几块
纯 IndexedDB 解决的是“本地有数据能读写”，但真实离线场景需要三件套协同：
-
Service Worker：拦截网络请求，返回缓存的 HTML/CSS/JS，让页面能加载出来 -
Cache API：缓存静态资源（如/app.js、/style.css），供 Service Worker 在离线时响应 -
IndexedDB：存动态业务数据（用户表单、草稿、同步队列等）
三者缺一不可。比如只配了 Cache API 却没注册 Service Worker，缓存不会生效；只用了 IndexedDB 却没缓存 JS，页面白屏。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
IndexedDB 离线写入后，怎么安全同步到服务器
离线期间所有写操作都只进 IndexedDB，等联网后再触发同步。难点不在“存”，而在“不丢、不重、不乱”：
- 给每条待同步记录加唯一
id和syncStatus字段（值为"pending"/"synced"/"failed"） - 同步前先查
syncStatus === "pending"的记录，按时间戳升序逐条 POST；成功后用put()更新状态 - 网络失败时捕获
fetch()的 reject，不要直接清空队列——保留"failed"状态，下次重试 - 避免并发冲突：服务端收到重复
id请求，应幂等处理（如INSERT ... ON CONFLICT DO NOTHING）
示例片段（简化）：
const tx = db.transaction(['drafts'], 'readwrite');
const store = tx.objectStore('drafts');
const pending = await store.getAll(IDBKeyRange.bound([0, 'pending'], [Date.now(), 'pending']));
for (const item of pending) {
try {
await fetch('/api/drafts', { method: 'POST', body: JSON.stringify(item) });
item.syncStatus = 'synced';
await store.put(item);
} catch (e) {
item.syncStatus = 'failed';
await store.put(item);
}
}
兼容性与存储上限：别等报错才想起查文档
IndexedDB 在 Chrome/Firefox/Safari/Edge 均支持，但细节差异明显：
- Safari 对
indexedDB.databases()支持很晚（iOS 16.4+），无法枚举已有库，得靠命名约定 + 错误兜底 - 存储上限不是固定值：Chrome 按 origin 总量计算（通常 50% 磁盘空闲空间），Safari 限制更严（iOS 上常卡在 50MB 左右）
- 大文件别硬塞 IndexedDB：超过 10MB 的 blob 应存
Cache API或文件系统（showSaveFilePicker），DB 里只存 URL 或 hash - 注意
versionchange事件阻塞：升级 schema 时若其他标签页开着旧版 DB，新版本打不开，需提示用户刷新
真正容易被忽略的，是“同步时机”——不是一联网就狂发请求，而是监听 navigator.onLine + fetch 成功率 + 用户当前是否在活跃页面，否则后台标签页可能偷偷耗尽 quota 或触发限流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
