Brankas Browser: Web Storage API
Pernahkah kamu menonton YouTube, mengubah temanya menjadi Dark Mode, lalu ketika kamu menutup
Laptop dan membukanya lagi besok hari, YouTube tersebut masih mengingat pengaturan Dark Mode-mu
padahal kamu tidak Login sama sekali?
Rahasia sulapnya terletak pada Brankas Penyimpanan Lokal (Web Storage). Browser Google
Chrome atau Safari milikmu diam-diam menyediakan ruang Harddisk mini sebesar 5MB untuk setiap
website agar mereka bisa menitipkan data (seperti pengaturan tema, isi keranjang belanja Shopee, atau token
Login masuk).
📦 1. Tiga Jenis Brankas Penyimpanan
Sebelum memasukkan data, Frontend Developer harus tahu 3 spesifikasi brankas yang ditawarkan oleh Browser:
localStorage
"Abadi Selamanya"
Menyimpan data (Kapasitas ~5MB) secara permanen. Ia tidak akan hilang meskipun Browser ditutup, Laptop dimatikan, atau wifi diputus. Hanya musnah jika User sengaja melakukan Clear History/Cache.
sessionStorage
"Satu Nafas Tab"
Menyimpan data (Kapasitas ~5MB) hanya selama Tab Browser hidup. Begitu kamu menekan tanda (X) untuk menutup Tab tersebut, semua datanya otomatis hancur lebur saat itu juga.
Cookies
"Kurir Lintas Server"
Penyimpanan sangat kecil (~4KB) warisan zaman baheula. Bedanya dari yang lain: setiap kali Frontend mem-fetch data ke Server Backend, seluruh isi Cookie otomatis ikut menempel terbang ke server! (Sering dipakai untuk Token Auth Login).
🔑 2. Aturan Bermain localStorage
Karena localStorage dan sessionStorage berbagi sintaks perintah yang 100% kembar
identik, kita akan fokus mempelajari sintaks `localStorage`. Ia bekerja menggunakan sistem Kunci-Gembok
(Key-Value Pairs). Ingat aturan mutlak: Browser HANYA BISA MENYIMPAN TEKS
(String).
💾 Menyimpan Data (setItem)
// Format: (Nama_Kunci, Isi_Datot)
localStorage.setItem("tema", "gelap");
// ❌ SALAH: Menyimpan Object/Array mentah
const user = { nama: "Andi" };
localStorage.setItem("data_andi", user);
// Nanti jadi tulisan string jelek "[object Object]"
// ✅ BENAR: Pipihkan (Stringify) Objek/Array!
const userTeks = JSON.stringify(user);
localStorage.setItem("data_andi", userTeks);
📂 Membaca & Hapus Data (getItem)
// 1. Memanggil Data String Biasa
let mode = localStorage.getItem("tema");
console.log(mode); // "gelap"
// 2. Membangkitkan String menjadi Object Hidup (Parse)
let mentah = localStorage.getItem("data_andi");
let userHidup = JSON.parse(mentah);
console.log(userHidup.nama); // "Andi"
// 3. Menghapus Data Secara Paksa
localStorage.removeItem("tema");
// Menghapus SEMUA (Bumi Hangus)
localStorage.clear();
🛒 3. Studi Kasus Mahakarya: Persistent Cart
Mari kita intip cara Tokopedia/Shopee membuat "Keranjang Belanja" (Cart) yang tidak pernah hilang barangnya walaupun kamu me-*Refresh* (F5) Browser secara sengaja. Di bawah ini, kamu bisa melihat arsitektur lengkap pemisahan HTML, murni CSS, dan nyawa JavaScript-nya.
🎯 Demo Live: Uji Coba Auto-Save (Tekan F5 Refresh HP/Desktop-mu untuk membuktikan)
Keranjang Toko Sepatu
Total: 0
Keranjang belanja di atas benar-benar menggunakan LocalStorage Browser Aslimu! Cobalah beli 2 Sepatu, tutup Tab browser (atau tutup Laptop/HP-mu), matikan Wifi, buka kembali halaman ini keesokan harinya... Kamu akan melihat 2 Sepatu tersebut masih nyangkut setia di sana!