Beginner · Level 4: JavaScript FundamentalsBeginner55 menitBahasa Indonesia

Menyimpan Data Lokal

Gunakan localStorage untuk menyimpan catatan kecil dari mini app lokal.

StatusMemuat progres

ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

Memahami kapan localStorage cocok dipakai
Menyimpan data string dengan localStorage.setItem
Membaca data tersimpan dengan localStorage.getItem
Menampilkan data tersimpan saat halaman dibuka ulang

localStorageDOMJavaScriptBrowser Storage

Isi lesson

5 blok

1.
Data kecil bisa disimpan di browserBelum selesaiWajib
2.
Menyimpan dan membaca catatanBelum selesaiWajib
3.
Checklist local taskBelum selesaiWajib
4.
Jangan simpan data sensitifBelum selesaiOpsional
5.
RingkasanBelum selesaiWajib

Data kecil bisa disimpan di browser

Wajib

Saat halaman di-refresh, nilai variabel JavaScript hilang. Untuk latihan app kecil, localStorage bisa dipakai agar data sederhana tetap tersedia di browser yang sama.

localStorage cocok untuk preferensi kecil, draft latihan, atau catatan sederhana. localStorage tidak cocok untuk password, token sensitif, data rahasia, atau data yang harus sinkron ke banyak perangkat.

Di lesson ini, kamu akan menyimpan catatan dari input ke localStorage, lalu menampilkan kembali catatan itu saat halaman dibuka ulang.

Bagian ini memengaruhi progres lesson.

Menyimpan dan membaca catatan

Wajib

const noteInput = document.querySelector("#noteInput");
const saveButton = document.querySelector("#saveButton");
const noteOutput = document.querySelector("#noteOutput");

const savedNote = localStorage.getItem("dailyNote");

if (savedNote) {
  noteInput.value = savedNote;
  noteOutput.textContent = "Catatan tersimpan: " + savedNote;
}

saveButton.addEventListener("click", function () {
  const note = noteInput.value.trim();

  if (note === "") {
    noteOutput.textContent = "Tulis catatan dulu.";
    return;
  }

  localStorage.setItem("dailyNote", note);
  noteOutput.textContent = "Catatan tersimpan: " + note;
});

getItem membaca data yang pernah disimpan. setItem menyimpan data baru. Karena localStorage menyimpan string, contoh ini sengaja memakai teks sederhana dulu.

Bagian ini memengaruhi progres lesson.

Checklist local task

Wajib

Kerjakan di project lokal kamu:

Tambahkan localStorage.getItem saat halaman dibuka.
Jika ada data tersimpan, tampilkan kembali ke input dan output.
Saat tombol diklik, simpan input dengan localStorage.setItem.
Refresh browser dan pastikan catatan masih muncul.
Ubah catatan, simpan lagi, lalu refresh sekali lagi.
Buka DevTools Application atau Storage jika browser kamu menyediakan panel itu, lalu cek key yang tersimpan.

Tandai selesai setelah data benar-benar bertahan setelah browser di-refresh.

Bagian ini memengaruhi progres lesson.

Peringatan

Opsional

Jangan simpan data sensitif

localStorage bisa dibaca oleh JavaScript di halaman yang sama. Untuk beginner project, pakai localStorage hanya untuk data latihan yang tidak sensitif.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib

Variabel JavaScript hilang saat halaman di-refresh.
localStorage menyimpan data kecil di browser yang sama.
setItem menyimpan data, getItem membaca data.
localStorage bukan tempat untuk data sensitif.
Berikutnya kamu akan memakai dokumentasi resmi saat debug, bukan hanya menebak-nebak error.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Data kecil bisa disimpan di browser.

Memuat progres Review module