FluentStack

Persistence Boundaries

Mode tersedia: dark, light, paper
MasukDaftar
Advanced · Level 16: Frontend ArchitectureAdvanced65 menitBahasa Indonesia

Persistence Boundaries

Memilih antara URL, localStorage, sessionStorage, dan backend berdasarkan nilai data, lifecycle, serta kebutuhan lintas device.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Menentukan state yang perlu bertahan setelah refresh atau browser ditutup
  • Membedakan localStorage, sessionStorage, URL, dan backend persistence
  • Menjaga data akun serta source of truth tetap berada di backend
  • Menghindari penyimpanan data sensitif atau object besar di browser storage tanpa alasan
PersistencelocalStoragesessionStorageBackendBrowser APIs

Isi lesson

6 blok
  1. 1.
    Persist hanya ketika lifecycle product memintanyaBelum selesaiWajib
  2. 2.
    Matriks persistence untuk learning featureBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Jangan simpan secret atau identitas sensitif sebagai convenience cacheBelum selesaiOpsional
  6. 6.
    RingkasanBelum selesaiWajib

Persist hanya ketika lifecycle product memintanya

Wajib

State tidak perlu disimpan hanya karena dapat disimpan. URL cocok untuk keadaan yang dapat dibagikan seperti query, filter, dan halaman. localStorage cocok untuk preferensi personal non-sensitif yang dapat bertahan antar sesi pada browser yang sama, misalnya theme atau tip onboarding yang sudah ditutup. sessionStorage cocok untuk data sementara per tab seperti draft flow pendek yang boleh hilang saat tab ditutup. Backend diperlukan untuk data akun, progress belajar, bookmark, atau keputusan yang perlu konsisten lintas device dan dapat diverifikasi server.

Browser storage bukan pengganti database. localStorage dan sessionStorage bersifat synchronous, dapat dibersihkan user, serta tidak aman untuk secret, token sensitif, atau source of truth data product. Tentukan juga fallback ketika storage tidak tersedia dan jangan membuat page gagal render hanya karena satu preferensi tidak dapat dibaca. Data yang hanya membantu kenyamanan UI perlu diperlakukan sebagai cache atau preference, bukan fakta produk.

Bagian ini memengaruhi progres lesson.

Matriks persistence untuk learning feature

Wajib
ts
type PersistenceHome =
  | "url"
  | "localStorage"
  | "sessionStorage"
  | "backend";

const learningFeaturePersistence = {
  searchQuery: "url",
  selectedLevel: "url",
  preferredTheme: "localStorage",
  unfinishedFeedbackDraft: "sessionStorage",
  lessonCompletion: "backend",
} satisfies Record<string, PersistenceHome>;

searchQuery dan selectedLevel perlu membuat hasil yang dapat dibuka ulang. preferredTheme adalah preferensi personal pada satu browser. Draft feedback sementara dapat hilang ketika tab ditutup tanpa merusak data akun. lessonCompletion harus tetap konsisten saat learner berganti device, sehingga backend adalah source of truth. Kalau draft memiliki nilai kerja nyata, persyaratan product mungkin berubah dan backend draft menjadi pilihan yang lebih tepat.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Choose course persistence boundary

Pilih persistence home untuk filter shareable, preference browser, draft per tab, dan completion akun learner.

Tujuan awal: Fokus di tab TS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis5 checklist
Belum selesaiBuka practice

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Di mana completion lesson learner seharusnya disimpan sebagai sumber kebenaran?

Progres lesson naik setelah jawaban benar.

Peringatan

Opsional

Jangan simpan secret atau identitas sensitif sebagai convenience cache

Jangan menyimpan password, access token sensitif, atau data pribadi yang tidak diperlukan di localStorage demi menghemat satu request. Setiap data browser storage dapat dibaca JavaScript pada origin tersebut dan lifecycle-nya berbeda dari security policy aplikasi. Ikuti pola auth dan session yang dirancang aplikasi, lalu batasi browser storage untuk data yang memang aman serta dapat hilang.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • URL menyimpan state shareable; localStorage menyimpan preferensi browser yang non-sensitif; sessionStorage cocok untuk konteks sementara per tab.
  • Backend memegang data akun dan fakta product yang perlu konsisten lintas device.
  • Browser storage adalah cache atau preference, bukan pengganti database serta security boundary.
  • Pilih persistence berdasarkan nilai data, lifecycle, privacy, dan recovery ketika storage hilang.
  • Berikutnya, kita memetakan kondisi gagal dan tindakan pemulihan pada setiap flow data.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Persist hanya ketika lifecycle product memintanya.

Memuat progresReview module