skillhub-088-vercel-react-best-practices/rules/js-cache-storage.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Cache Storage API Calls	LOW-MEDIUM	减少昂贵的 I/O 操作	javascript, localStorage, storage, caching, performance

Cache Storage API Calls

localStorage、sessionStorage和document.cookie是同步且开销昂贵的操作。将读取结果缓存在内存中。

错误做法（每次调用都读取存储）：

function getTheme() {
  return localStorage.getItem('theme') ?? 'light'
}
// 调用 10 次 = 10 次存储读取

正确做法（Map 缓存）：

const storageCache = new Map<string, string | null>()

function getLocalStorage(key: string) {
  if (!storageCache.has(key)) {
    storageCache.set(key, localStorage.getItem(key))
  }
  return storageCache.get(key)
}

function setLocalStorage(key: string, value: string) {
  localStorage.setItem(key, value)
  storageCache.set(key, value)  // 保持缓存同步
}

使用 Map（而非 hook），使其在任何地方都能工作：工具函数、事件处理器，不限于 React 组件。

Cookie 缓存：

let cookieCache: Record<string, string> | null = null

function getCookie(name: string) {
  if (!cookieCache) {
    cookieCache = Object.fromEntries(
      document.cookie.split('; ').map(c => c.split('='))
    )
  }
  return cookieCache[name]
}

重要事项（外部变更时失效）：

如果存储可能被外部修改（另一个标签页、服务端设置的 Cookie），使缓存失效：

window.addEventListener('storage', (e) => {
  if (e.key) storageCache.delete(e.key)
})

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    storageCache.clear()
  }
})