Cursor rule

1---
2alwaysApply: false
3---
4 
5## Cache Storage API Calls
6 
7`localStorage`, `sessionStorage`, and `document.cookie` are synchronous and expensive. Cache reads in memory.
8 
9**Incorrect (reads storage on every call):**
10 
11```typescript
12function getTheme() {
13  return localStorage.getItem('theme') ?? 'light'
14}
15// Called 10 times = 10 storage reads
16```
17 
18**Correct (Map cache):**
19 
20```typescript
21const storageCache = new Map<string, string | null>()
22 
23function getLocalStorage(key: string) {
24  if (!storageCache.has(key)) {
25    storageCache.set(key, localStorage.getItem(key))
26  }
27  return storageCache.get(key)
28}
29 
30function setLocalStorage(key: string, value: string) {
31  localStorage.setItem(key, value)
32  storageCache.set(key, value)  // keep cache in sync
33}
34```
35 
36Use a Map (not a hook) so it works everywhere: utilities, event handlers, not just React components.
37 
38**Cookie caching:**
39 
40```typescript
41let cookieCache: Record<string, string> | null = null
42 
43function getCookie(name: string) {
44  if (!cookieCache) {
45    cookieCache = Object.fromEntries(
46      document.cookie.split('; ').map(c => c.split('='))
47    )
48  }
49  return cookieCache[name]
50}
51```
52 
53**Important (invalidate on external changes):**
54 
55If storage can change externally (another tab, server-set cookies), invalidate cache:
56 
57```typescript
58window.addEventListener('storage', (e) => {
59  if (e.key) storageCache.delete(e.key)
60})
61 
62document.addEventListener('visibilitychange', () => {
63  if (document.visibilityState === 'visible') {
64    storageCache.clear()
65  }
66})
67```
68