webstorage用户行为埋点缓存需兼顾“临时存得住”和“可靠传得走”：localstorage作兜底缓存，sessionstorage记录单页会话轨迹；数据须精简为字符串/数字字段（e/t/p/i/sid），json.stringify后存入；写入需节流、异步批量、控量（单条≤1.5kb，总量≤3mb）；上传采用beforeunload+requestidlecallback双时机，失败重试≤3次；清理需设expire字段、登出/升级时主动清除，并捕获quotaexceedederror兜底。
用 WebStorage 做用户行为埋点缓存，核心是把“临时存得住”和“可靠传得走”结合起来。localStorage 适合做兜底缓存，sessionStorage 更适合单页会话内快速轨迹记录，但都不能直接存对象或大段数据，必须结构轻、写得稳、传得准。
数据结构要精简且带必要上下文
每条埋点只保留关键字段，避免冗余：事件类型（e）、时间戳（t）、当前路径（p）、触发元素标识（i）、会话 ID（sid）。全部字段都应为字符串或数字，不能含函数、DOM 节点或未序列化的对象。
存之前必须 JSON.stringify，例如：
{ "e": "click", "t": 1718234567890, "p": "/home", "i": "nav-menu", "sid": "s123abc" }不建议在数据里塞 user_info、full_url 或截图 base64——这些会迅速撑满容量，也增加序列化开销。
写入要节流、防抖、控量
高频行为（如 scroll、mousemove）不能每次触发都调 localStorage.setItem。正确做法是：
- 内存中维护一个数组队列，暂存最近几十条事件
- 用 requestIdleCallback 或 setTimeout(..., 0) 异步批量写入，避免阻塞渲染
- 写入前检查长度：localStorage.length 可粗略判断 key 数量，new TextEncoder().encode(JSON.stringify(queue)).length 才能准确估算字节数
- 单条建议 ≤ 1.5KB，整体会话缓存控制在 3MB 内；超限时优先丢弃 hover、scroll 等低价值事件
上传要多时机触发 + 失败可重试
缓存不是终点，上传成功才算闭环。推荐组合策略：
- 页面卸载前（beforeunload）用 navigator.sendBeacon 发送小批量剩余数据，不依赖 await
- 空闲时（requestIdleCallback）每 5–10 秒检查一次，有数据就 fetch 上传，成功后从 localStorage 中 remove 对应 key
- 上传失败时，把原始数据加 retry: 1 字段重新塞回队列；最多重试 3 次，再失败则标记为“降级日志”，不上报但可本地 console.warn
- 页面加载后立即读取 localStorage 中残留数据，合并进当前队列，尽快补传
清理要带过期机制 + 主动兜底
localStorage 不会自动过期，必须自己管生命周期：
- 每条数据加上 expire 字段（如 Date.now() + 24 * 60 * 60 * 1000），读取时先过滤过期项
- 用户登出、版本升级、手动清除缓存时，removeItem 或 clear 相关 key
- 捕获 QuotaExceededError 后触发清理逻辑，优先删过期数据，再按 lastUsed 时间淘汰最久未用项
- sessionStorage 可用于记录单次操作链（如表单填写步骤），关闭标签页即释放，但异常崩溃时需 beforeunload 补清草稿标记
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
