Lewati ke konten utama
menjadi.dev
Chapter 4.2 Data & Storage Menengah

localStorage dan sessionStorage: Lemari Browser

Penyimpanan key-value di browser

Tujuan Pembelajaran

  • Bisa menggunakan localStorage dan sessionStorage
  • Mengerti kapan menggunakan masing-masing

Analogi

Diagram

      localStorage = Lemari Kamar (Permanen)
  - Isinya tetap walau tutup browser

sessionStorage = Loker Mall (Sementara)
  - Isinya hilang saat tutup tab
    

localStorage = permanen, sessionStorage = sementara

Penjelasan Konsep

Website modern penuh dengan keputusan. Saat kamu login, sistem harus memutuskan: password benar atau salah? Kalau benar → arahkan ke dashboard. Kalau salah → tampilkan pesan error.

Saat kamu belanja online, sistem harus memeriksa: stok masih ada? Kalau ya → lanjutkan checkout. Kalau tidak → tampilkan “sold out.” Saat kamu scroll Instagram, sistem harus memutuskan: sudah sampai bawah? Kalau ya → muat postingan baru.

Setiap detik, JavaScript membuat ratusan keputusan kecil seperti ini. Dan untuk membuat keputusan, kita butuh struktur kondisi.

Analoginya seperti persimpangan jalan.

Kamu berdiri di pertigaan. Ke kiri jalan ke pantai, ke kanan jalan ke gunung, lurus jalan ke kota. Kamu harus membuat keputusan berdasarkan kondisi: “Kalau cuaca panas, ke pantai.

Kalau dingin, ke gunung.

Selain itu, ke kota.” Struktur kondisi dalam pemrograman bekerja dengan cara yang persis sama — mengevaluasi kondisi dan memilih jalur yang sesuai.

If/Else: Struktur Kondisi Dasar

if memeriksa kondisi.

Kalau kondisi benar (true), blok kode di dalamnya dieksekusi.

Kalau salah (false), dilewati.

if (umur >= 18) {
  console.log('Dewasa');
}

else memberikan alternatif kalau kondisi if salah:

if (umur >= 18) {
  console.log('Dewasa');
} else {
  console.log('Anak-anak');
}

else if untuk mengecek kondisi tambahan:

if (nilai >= 90) { grade = 'A'; }
else if (nilai >= 80) { grade = 'B'; }
else if (nilai >= 70) { grade = 'C'; }
else { grade = 'D'; }

Operator Perbandingan

  • === : Sama dengan (tipe data harus sama) — SELALU gunakan ini!
  • !== : Tidak sama dengan
  • > , < : Lebih besar, lebih kecil
  • >= , <= : Lebih besar/sama dengan,

Lebih kecil/sama dengan

Operator Logika

  • && (AND): Kedua kondisi harus benar
  • || (OR): Salah satu kondisi benar cukup
  • ! (NOT): Membalik nilai boolean

Contoh:

if (umur >= 18 && memilikiSIM) {
  console.log('Boleh menyetir');
}
if (hari === 'Sabtu' || hari === 'Minggu') {
  console.log('Akhir pekan!');
}

Switch: Pilihan Banyak

Switch adalah alternatif if/else if yang lebih rapi untuk kondisi yang mengecek nilai sama.

switch (hari) {
  case 'Senin': console.log('Meeting'); break;
  case 'Jumat': console.log('Review'); break;
  default: console.log('Ngoding');
}

Perulangan: Mengulang Tugas

Komputer luar biasa karena bisa mengerjakan tugas berulang tanpa lelah.

Perulangan memungkinkan kita menulis kode sekali dan mengeksekusinya berkali-kali.

For Loop

Perulangan dengan counter, paling umum digunakan:

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}

Penjelasan: let i = 0 (mulai dari 0) → i < 5 (ulangi selama i kurang dari 5) → i++ (tambah 1 setiap iterasi).

While Loop

Perulangan dengan kondisi saja,

Cocok kalau jumlah iterasi tidak diketahui:

let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

For…of

Cara modern untuk iterasi array (ES6):

for (const item of keranjang) {
  console.log(item.nama);
}

For…in

Untuk iterasi property object:

for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Kenapa logika dan perulangan penting?

Karena ini adalah fondasi dari setiap program.

Website, aplikasi, game — semuanya dibangun dari keputusan (kondisi) dan pengulangan (loop).

Form validation?

Kondisi.

Menampilkan daftar produk? Perulangan. Search filter? Kombinasi keduanya.

Memahami logika pemrograman akan membuatmu bisa memecahkan hampir semua masalah pemrograman.

Contoh Kode

javascript
// localStorage API
localStorage.setItem('theme', 'dark');

const user = { id: 1, name: 'Budi' };
localStorage.setItem('user', JSON.stringify(user));

const theme = localStorage.getItem('theme');
const userObj = JSON.parse(localStorage.getItem('user'));

if (localStorage.getItem('theme') !== null) {
  console.log('Theme sudah di-set');
}

localStorage.removeItem('theme');
// localStorage.clear(); // Hapus semua!

// sessionStorage (sama persis!)
sessionStorage.setItem('formDraft', JSON.stringify({ title: '' }));
const draft = JSON.parse(sessionStorage.getItem('formDraft') || '{}');

Penjelasan Kode

Baris 2-3: Set string. Baris 5-6: Set object. Baris 8-9: Get data. Baris 14: Remove. Baris 18-19: sessionStorage.

Prompt AI

Jelaskan kenapa localStorage hanya bisa menyimpan string. Bagaimana cara menyimpan array?

Pertanyaan Reflektif

Buat fitur dark mode toggle. Simpan preferensi di localStorage. Coba tutup browser — apakah tetap tersimpan?