当 localStorage 接近容量上限时需实时监测、分级预警与安全清理：通过 TextEncoder 精确计算占用，超90%阈值触发控制台/监控/用户提示；按数据优先级LRU清理非关键项，长期应改用 IndexedDB、sessionStorage 或服务端同步。
当 localStorage 接近容量上限（通常为 5–10MB，因浏览器而异）时，不主动干预可能导致写入失败、页面异常甚至静默丢数据。预警与自动清理不能只靠“估算”，需结合真实占用、关键数据优先级和用户感知来设计。
实时监测存储使用率
localStorage 本身不提供容量查询接口，但可通过序列化所有键值并计算字符串长度来估算实际占用（单位：字节）。注意：JSON.stringify 的结果长度 ≈ UTF-16 编码字节数，与浏览器内部存储计量方式基本一致。
建议每 5–10 次写入操作或每次页面加载时执行一次检测，避免高频遍历影响性能：
- 遍历
localStorage所有 key，拼接成一个对象后JSON.stringify - 用
new TextEncoder().encode(str).length获取更准确的 UTF-8 字节长度（推荐），或直接用str.length * 2粗略估算（UTF-16） - 对比阈值（如 4.5MB = 4718592 字节），超过 90% 即触发预警
分级预警：控制台 + 用户提示 + 开发钩子
不要只依赖 console.warn —— 它容易被忽略，也不适合线上监控。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 开发环境：在控制台输出带堆栈的警告，并附当前占用 / 总配额（可用
performance.memory?.jsHeapSizeLimit辅助参考，但非精确） - 生产环境：记录到前端监控系统（如 Sentry 的 custom breadcrumb），标记为
storage:warning - 用户可见提示（谨慎）：仅当确认影响核心功能（如表单草稿、离线任务）时，弹出轻量 toast：“本地存储空间紧张，部分临时内容可能被清理”
- 暴露全局钩子：如
window.__onLocalStorageFull = (usage, keys) => { ... }，方便业务层介入
安全自动清理：按策略释放，不误删关键数据
清理不是清空，而是“选择性降级”。必须区分数据类型：
- 可重建数据：API 缓存、列表分页快照、非核心 UI 状态（如折叠面板开关）→ 优先删除，带时间戳的可按 LRU 清理
- 用户生成数据：草稿、未提交表单、收藏项 → 加白名单保护，或仅在用户确认后清理
- 配置类数据：主题、语言、隐私设置 → 永久保留，不应进入清理范围
示例策略代码片段：
function cleanupStorage(threshold = 0.9) {
const total = [...localStorage.keys()].reduce((sum, key) => {
try {
return sum + new TextEncoder().encode(key + localStorage.getItem(key)).length;
} catch {
return sum;
}
}, 0);
<p>if (total / 5_000_000 < threshold) return;</p><p>const entries = [...localStorage.keys()]
.map(key => ({ key, value: localStorage.getItem(key), size: new TextEncoder().encode(key + localStorage.getItem(key)).length }))
.filter(({ key }) => !['user_id', 'theme', 'locale'].includes(key)) // 白名单保护
.sort((a, b) => a.size - b.size); // 小的先删，减少震荡</p><p>let freed = 0;
while (freed < 500_000 && entries.length) { // 至少释放 500KB
const { key } = entries.shift();
localStorage.removeItem(key);
freed += new TextEncoder().encode(key + localStorage.getItem(key)).length;
}
}</p>长期优化：从源头减少 localStorage 依赖
预警和清理是兜底手段，治本在于架构减负：
- 大体积数据（如图片 base64、长日志）改用
IndexedDB，它容量更大（可达硬盘的 50%）、支持事务和索引 - 短期状态（路由参数、临时筛选）用
sessionStorage或内存变量，关闭即释放 - 服务端同步优先：将草稿、偏好等关键数据定时/增量同步至后端，localStorage 仅作 fallback 缓存
- 启用压缩：对 JSON 值做轻量 LZUTF8 或 msgpack 压缩（尤其文本多时可省 30%+ 空间）
