Yaya kuke tsara da sake cikawa yanayin?

Question

Accepted Answer

**Tsarawa** yanayin nufin kitayar sa zuwa ajiya (localStorage, IndexedDB, baje gida) saboda yakan tsira sakamako ko lokacin; **sake cikawa** nufin sake lodowa shi zuwa app a farawa. Gida don karuwa, alamun gida, zaɓubar mai amfani, da nau'in kudi gazetaci.

## Tsarawa sauki da sake cikawa tare da localStorage

```jsx
function useCart() {
  // HYDRATE: initialize from storage (lazy initializer runs once)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // parse stored JSON
    } catch {
      return [];                                   // guard against corrupt data
    }
  });

// PERSIST: write to storage whenever it changes
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

Sannan ɓanga biyu: karanta da aiki a farwa (sake cikawa), da wawa-rubuta a sauyi (tsarawa).

## Takaici kariya

```js
// Zustand persist middleware — automatic persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// redux-persist for Redux; both handle serialization + rehydration
```

## Zaɓin ajiya

```text
localStorage  → simple, synchronous, ~5–10MB, strings only (JSON) — preferences, small state
sessionStorage→ like localStorage but cleared when the tab closes
IndexedDB     → large/structured data, async — offline apps, big caches
Cookies       → sent to server; for auth (httpOnly for security)
Backend       → cross-device sync, source of truth for important data
```

## Gargajiya mahimmacin

```text
⚠️ SSR mismatch: localStorage doesn't exist on the server → guard with typeof window,
   and beware hydration mismatches between server-rendered and client state.
⚠️ Versioning/migration: stored shape may differ from new code → version it and migrate.
⚠️ Don't persist sensitive data (tokens) in localStorage (XSS-readable) — prefer httpOnly cookies.
⚠️ Don't persist server state you can refetch (let React Query handle caching).
⚠️ Validate/guard on hydrate — stored data can be stale or corrupt.
```

## Yaya ya fadadi mahimmaci

Tsarawa tana ba da kimar gaske na UX — karuwa tsira maimaitawa, zaɓubar da kudi ba a rasa, mai amfani zai kasance cikin shiga.

Ammα na'i kankadi na mara sani sauki-sauki saura mahimmacin matsaloli: SSR sake cikawa ba ɗaya ba, suya/lalacewar bayanai, tsara-motsi karni, da **hadari na kariya** (tsarawa tasa a ajiya da ta iya karantawa XSS).

Sanin tsara/sake cikawa alura, zaɓin daidai ajiya don bayanai, da mutunci gargajiya (kariya SSR, sigar tsara, kada ka ajiye siru ba safu, kada ka tsara samuwar jiya karkashin maimaitawa) gida ne wanda ke sa tsarawa karfi ban gida don gaɓataccen matsaloli.