仅在页面关闭时使用LocalStorage存储的可行性及优化方案咨询

该方案理论可实现，但数据可靠性极低，不推荐作为核心存储逻辑：
当前主流浏览器对unload、beforeunload类页面退出事件的限制越来越多，移动设备端页面切后台后被系统主动回收、浏览器崩溃、进程强制结束等场景下，退出事件大概率不会触发，会导致全量计数器数据丢失。

• 每次更新同步存储：优势是数据可靠性最高，无特殊场景下的丢数风险；劣势为高频率更新场景下，LocalStorage的同步写入会轻微阻塞主线程。但单条数字存储的写入耗时仅为微秒级，若计数器更新频次低于每秒100次，用户完全感知不到性能损耗，普通场景下完全可用。
• 仅退出时存储：优势是无高频写入开销，劣势为丢数风险极高，仅适合计数器数值可容忍丢失、对数据准确性要求极低的场景。

推荐采用「闲时防抖写入 + 页面隐藏兜底 + 退出最终校验」的三层方案，兼顾写入性能和数据可靠性：

1. 对计数器更新逻辑加1000ms以内的防抖，仅在更新停顿时触发存储，大幅降低写入频次
2. 监听visibilitychange事件，页面切后台/隐藏时立刻同步写入，该事件触发稳定性远高于退出类事件，覆盖99%以上的非主动退出场景
3. 最后增加beforeunload事件兜底，正常关闭页面时做最终的写入校验

参考实现代码：

let counter = Number(localStorage.getItem('counter')) || 0
let savePending = false

// 防抖写入逻辑
const debounceSave = debounce(() => {
  requestIdleCallback(() => {
    localStorage.setItem('counter', counter.toString())
    savePending = false
  })
}, 800)

// 计数器更新时触发
function updateCounter(addValue) {
  counter += addValue
  if (!savePending) {
    savePending = true
    debounceSave()
  }
}

// 页面隐藏兜底写入
document.addEventListener('visibilitychange', () => {
  if (document.hidden && savePending) {
    localStorage.setItem('counter', counter.toString())
    savePending = false
  }
})

// 正常退出兜底写入
window.addEventListener('beforeunload', () => {
  if (savePending) {
    localStorage.setItem('counter', counter.toString())
  }
})

若计数器更新频次确实达到每秒数百次以上，可将LocalStorage替换为异步写入的IndexedDB，进一步降低主线程阻塞风险。

内容的提问来源于stack exchange，提问作者Jacob F