Kako trajno shranite in nahranite stanje (state)?

Question

IT Interview Practice · Accepted Answer

**Trajno shranjevanje** stanja pomeni его shranjevanje v skladišče (localStorage, IndexedDB, backend) tako, da preživi osvežitve strani ali seje; **nahranjevanje** pomeni його ponovno nalaganje v aplikacijo ob zagonu. Pogosto se uporablja za košarice, avtentifikacijske žetone, nastavitve uporabnikov in osnutke obrazcev.

## Osnovno trajno shranjevanje + nahranjevanje z 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];
}
```

Dva dela: branje in razčlenjevanje ob inicializaciji (nahranjevanje) ter serializacija in pisanje ob spremembi (trajno shranjevanje).

## Podpora knjižnic

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

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

## Izbira skladišča

```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
```

## Pomembne opozorila

```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.
```

## Zakaj je to pomembno

Trajno shranjevanje nudi pravo vrednost UX — košarice preživijo osvežitve, nastavitve in osnutki niso izgubljeni, uporabniki ostanejo prijavljeni.

Naivna implementacija pa vnaša subtilne, resne težave: neskladja pri SSR hidrataciji, zastarele/pokvarjene podatke, prekinitve migracij shem in **varnostna tveganja** (trajno shranjevanje žetonov v skladišču, ki ga je mogoče prebrati s strani XSS).

Znanje vzorca trajnega shranjevanja/nahranjevanja, izbira prave vrste skladišča za podatke in spoštovanje opozoril (zaščita pred SSR, različica sheme, nevarnostni tokeni se ne shranjujejo varno, ne shrani refetchable server stanja) je tisto, kar trajno shranjevanje naredi solidno namesto vira težko diagnosticirannih napak.

Osnovno trajno shranjevanje + nahranjevanje z localStorage

Podpora knjižnic

Izbira skladišča

Pomembne opozorila

Zakaj je to pomembno

Povezana vprašanja