localStorage dan sessionStorage: Lemari Browser
Penyimpanan key-value di browser
Tujuan Pembelajaran
- Bisa menggunakan localStorage dan sessionStorage
- Mengerti kapan menggunakan masing-masing
Analogi
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
// 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
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?