[ PROMPT_NODE_25210 ]
js-cache-storage
[ SKILL_DOCUMENTATION ]
## 缓存 Storage API 调用
`localStorage`、`sessionStorage` 和 `document.cookie` 是同步且昂贵的。请在内存中缓存读取结果。
**错误做法(每次调用都读取存储):**
typescript
function getTheme() {
return localStorage.getItem('theme') ?? 'light'
}
// 调用 10 次 = 10 次存储读取
**正确做法(Map 缓存):**
typescript
const storageCache = new Map()
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 缓存:**
typescript
let cookieCache: Record | null = null
function getCookie(name: string) {
if (!cookieCache) {
cookieCache = Object.fromEntries(
document.cookie.split('; ').map(c => c.split('='))
)
}
return cookieCache[name]
}
**重要(在外部变更时失效):**
如果存储可能在外部发生变化(其他标签页、服务器设置的 Cookie),请使缓存失效:
typescript
window.addEventListener('storage', (e) => {
if (e.key) storageCache.delete(e.key)
})
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
storageCache.clear()
}
})