Svelte Store Persist Localstorage Sessionstorage Custom Store

Definisi

Store bisa di-persist ke localStorage/sessionStorage lewat custom store yang membaca nilai awal dari storage dan menulis setiap perubahan. Berguna untuk tema, keranjang, preferensi user yang bertahan saat reload.

Kapan dipakai

Pakai saat state harus bertahan antar sesi (dark mode, cart, token sementara di sessionStorage). Jangan simpan secret di localStorage (bisa dibaca JS mana pun).

Cara kerja

Custom persist store

js

import { writable } from 'svelte/store';
 
function persisted(key, initial) {
  const saved = localStorage.getItem(key);
  const store = writable(saved ? JSON.parse(saved) : initial);
  store.subscribe((v) => localStorage.setItem(key, JSON.stringify(v)));
  return store;
}
 
export const theme = persisted('theme', 'light');

Pakai

svelte

<script>
  import { theme } from './store.js';
</script>
<button on:click={() => theme.update(t => t === 'light' ? 'dark' : 'light')}>
  Toggle ({$theme})
</button>

Struktur alur

Catatan implementasi

• Di SSR (SvelteKit), localStorage tidak ada di server; guard dengan typeof localStorage !== 'undefined'.
• Subscribe menulis setiap perubahan — cocok, tapi hindari store yang update sangat sering (banyak write).
• sessionStorage untuk data sekali sesi (login temp); localStorage untuk jangka panjang.
• Bungkus JSON parse dengan try/catch kalau storage rusak.

Kesalahan umum

• Tulis di server (SSR): error localStorage is not defined; guard dulu.
• Simpan secret: token di localStorage rentan XSS; gunakan httpOnly cookie untuk auth.
• Subscribe tanpa unsubscribe di SSR: leak; di .svelte pakai $ auto.
• JSON rusak: parse gagal; try/catch fallback initial.

Referensi terkait

• Svelte Stores: writable, readable, derived, custom
• Svelte Lifecycle: onMount, onDestroy, tick
• React useSyncExternalStore, External Store