Battery Status API 可在电量低于20%且未充电时触发轻量提醒并自动保存草稿，需HTTPS环境、监听onlevelchange、防抖处理，并配合beforeunload和localStorage实现数据保护。
当设备电量低于 20% 时，自动提示用户保存当前编辑的草稿，是 Battery Status API 的一个实用场景。它不依赖后台服务或权限申请，只需监听电量变化，在合适时机触发轻量级提醒。
检查浏览器支持并获取电池状态
该 API 在 Chrome、Edge 和 Opera 中可用（Firefox 已弃用，Safari 不支持），需通过 navigator.getBattery() 获取电池对象。调用返回 Promise，成功后可监听电量与充电状态变化：
- 先判断
'getBattery' in navigator是否为真，避免报错 - 使用
await navigator.getBattery()获取电池实例，不要在未 await 时直接访问属性 - 常见错误：在 HTTPS 页面外调用会静默失败，确保站点启用 HTTPS
监听电量下降并设置提醒阈值
低电量提醒不宜太早（如 50% 就弹窗）也不宜太晚（如 5% 才响应）。建议在 20% 以下且未在充电 时触发：
- 监听
battery.onlevelchange，而非轮询battery.level - 结合
battery.charging === false排除插电场景，避免干扰 - 添加防抖逻辑：同一低电量状态只提示一次，防止反复触发
在表单失焦或页面卸载前保存草稿
单纯弹窗提醒不够可靠，应配合自动保存机制提升数据安全性：
- 监听
window.onbeforeunload，在用户关闭/跳转前尝试保存草稿到 localStorage - 对富文本编辑器（如 contenteditable 或 textarea），定期将内容序列化后存入本地缓存
- 若已接入后端保存接口，可在低电量时主动调用一次“紧急保存”，并显示“已为您暂存”反馈
提供清晰、非侵入式用户提示
提醒应轻量、可关闭、不打断操作，避免使用 alert() 或全屏模态框：
- 在编辑区域顶部或右下角显示带图标的浮动提示条，3 秒后自动淡出
- 文案明确：“电量不足，建议立即保存草稿” + “保存”按钮（点击执行本地保存）
- 允许用户点击“不再提醒”并写入 localStorage，下次同设备不再触发
