localstorage结合navigator.online可实现断网日志暂存与联网自动补发:离线时追加序列化日志至数组,上线后逐条发送并清理,需控制体积、降级处理及去重防重复。

LocalStorage 本身不感知网络状态,但可以结合 navigator.onLine 和事件监听,在断网时暂存日志,联网后自动补发。
检测网络状态并缓存日志
利用 window.addEventListener('offline') 捕获断网时刻,将日志序列化后存入 LocalStorage。注意避免直接覆盖已有日志,应以数组形式追加:
- 每次写入前读取已有日志(
JSON.parse(localStorage.getItem('pendingLogs') || '[]')) - 将新日志对象 push 进数组,再整体写回(
localStorage.setItem('pendingLogs', JSON.stringify(logs))) - 日志建议包含时间戳、级别(info/warn/error)、消息内容和可选堆栈
监听上线并触发重发
监听 online 事件,在恢复联网时尝试发送待发日志:
- 从 LocalStorage 读取
pendingLogs,清空存储(防止重复发送) - 逐条或批量通过
fetch发送到日志服务端(建议加简单重试逻辑,如失败则重新存回) - 发送成功后从数组中移除对应项;若某条失败,可保留并标记重试次数,避免无限失败阻塞后续
避免日志堆积与容量超限
LocalStorage 容量通常仅 5–10MB,需主动控制日志体积:
- 限制单条日志字段,避免记录完整 DOM 或大对象(可只存关键属性)
- 设置最大缓存条数(如最多 500 条),超出时按 FIFO 舍弃最老日志
- 定期清理:可在上线发送后检查剩余空间,或在存入前估算字符串长度,超限时截断或警告
补充健壮性细节
实际使用中还需考虑边界情况:
- LocalStorage 可能被用户清除,或因浏览器隐私模式不可用,需有降级方案(如内存暂存 + 提示)
-
navigator.onLine仅反映底层连接,不保证服务器可达,发送时仍需处理 HTTP 错误(4xx/5xx、timeout) - 页面关闭前可监听
beforeunload尝试同步发送,但不可靠,仍以 online 事件为主
不复杂但容易忽略的是:日志发送必须带唯一请求 ID 或时间戳去重,防止因重试导致服务端重复入库。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











