FluentStack

localStorage Dasar

Mode tersedia: dark, light, paper
MasukDaftar
Beginner · Level 4: JavaScript FundamentalsBeginner40 menitBahasa Indonesia

localStorage Dasar

Belajar menyimpan teks kecil di browser agar bisa dipakai lagi saat halaman dibuka.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami localStorage sebagai penyimpanan kecil di browser
  • Menyimpan value dengan localStorage.setItem
  • Membaca value dengan localStorage.getItem
JavaScriptlocalStorageBrowser Storage

Isi lesson

6 blok
  1. 1.
    Tidak semua data harus hilang langsungBelum selesaiWajib
  2. 2.
    setItem menyimpan, getItem membacaBelum selesaiWajib
  3. 3.
    Menyimpan draft kecilBelum selesaiWajib
  4. 4.
    Di practice, storage hanya untuk previewBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Tidak semua data harus hilang langsung

Wajib

Sampai sini, perubahan UI hanya bertahan selama halaman sedang berjalan. Untuk data kecil seperti draft nama, preferensi tema, atau catatan latihan, browser menyediakan localStorage. Data ini disimpan sebagai teks dengan pasangan key dan value.

Bagian ini memengaruhi progres lesson.

setItem menyimpan, getItem membaca

Wajib

localStorage.setItem("key", value) menyimpan data. localStorage.getItem("key") membaca data yang pernah disimpan. Di aplikasi nyata, localStorage cocok untuk data ringan di browser, bukan data sensitif seperti password atau token rahasia.

Bagian ini memengaruhi progres lesson.

Menyimpan draft kecil

Wajib
js
localStorage.setItem("draftName", "Rina");

const savedName = localStorage.getItem("draftName");
console.log(savedName);

draftName adalah key. "Rina" adalah value yang disimpan. Saat getItem memakai key yang sama, browser mengembalikan value yang pernah disimpan.

Bagian ini memengaruhi progres lesson.

Catatan penting

Wajib

Di practice, storage hanya untuk preview

Practice workspace memakai preview sandbox. Pola localStorage yang kamu tulis sama, tetapi data penyimpanannya dipakai untuk latihan di preview, bukan sebagai database akun.

Bagian ini memengaruhi progres lesson.

Coding practice

WajibDibuka di workspace khusus

Menyimpan draft dengan localStorage

Latihan menyimpan dan membaca teks kecil dengan localStorage.

Tujuan awal: Fokus di tab JS.

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

Tombol selesai aktif setelah semua validasi wajib lolos.

5 cek otomatis3 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • localStorage menyimpan data kecil di browser sebagai teks.
  • setItem menyimpan value dengan key tertentu.
  • getItem membaca value dari key yang sama.
  • Jangan menyimpan data sensitif di localStorage.
  • Berikutnya, kamu akan mengambil data contoh dengan fetch dan membaca JSON.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Tidak semua data harus hilang langsung.

Memuat progresReview module