Bayangkan kamu pergi belanja ke supermarket, sudah susah payah memasukkan banyak barang ke keranjang, lalu tiba-tiba mati lampu. Begitu listrik menyala lagi — keranjangmu kosong. Frustrasi, kan?
Itulah yang terjadi di banyak website tanpa mekanisme penyimpanan data. Untungnya, JavaScript punya solusi elegan: localStorage dan sessionStorage — dua fitur Web Storage API yang memungkinkan kamu menyimpan data langsung di browser, tanpa perlu database atau server. Di artikel ke-10 dari Seri Belajar JavaScript from Zero to Zorro ini, kita akan bongkar tuntas cara kerja, perbedaan, dan implementasi praktisnya!
Web Storage API adalah mekanisme bawaan browser yang memungkinkan aplikasi web menyimpan pasangan key-value secara lokal di perangkat pengguna.
Ada dua jenisnya: localStorage (data permanen sampai dihapus manual) dan sessionStorage (data hilang begitu tab/browser ditutup). Keduanya mampu menyimpan hingga 5–10 MB data per origin.
🧠 Apa Itu localStorage dan sessionStorage JavaScript?
Anggap saja browser-mu punya dua jenis laci:
- 🗄️ localStorage = Laci permanen. Kamu simpan sesuatu, besok buka browser lagi, masih ada. Cocok buat preferensi pengguna, tema dark/light, atau data login ringan.
- 📋 sessionStorage = Laci sementara. Cuma aktif selama satu sesi (tab terbuka). Begitu kamu tutup tab — poof, hilang. Cocok buat wizard form multi-langkah atau data checkout sementara.
Keduanya menggunakan sintaks yang hampir identis — bedanya cuma nama objeknya. Inilah yang bikin Web Storage API sangat mudah dipelajari!
Sebelum Web Storage API ada (2009), developer terpaksa menyimpan data kecil menggunakan cookies — yang punya limit hanya 4KB dan selalu dikirim ke server di setiap request. Bayangkan betapa borosnya bandwidth waktu itu!
📊 Tabel Perbandingan: localStorage vs sessionStorage vs Cookie
| Fitur | localStorage | sessionStorage | Cookie |
|---|---|---|---|
| Kapasitas | 5–10 MB | 5–10 MB | ~4 KB |
| Durasi | Permanen | Per sesi tab | Bisa diatur |
| Dikirim ke server | ❌ Tidak | ❌ Tidak | ✅ Ya (setiap request) |
| Akses dari JS | ✅ Mudah | ✅ Mudah | ⚠️ Lumayan |
| Keamanan | Rentan XSS | Rentan XSS | HttpOnly option |
⚙️ Cara Menyimpan Data di Browser: Panduan Lengkap localStorage JavaScript
Web Storage API bekerja dengan sistem key-value — seperti kamus. Kamu simpan data dengan "nama" tertentu (key), dan nanti ambil lagi pakai nama yang sama. Sintaksnya super bersih dan intuitif.
4 Operasi Dasar Web Storage (CRUD)
Simpan Data — setItem()
Gunakan setItem(key, value) untuk menyimpan data. Ingat: value harus berupa string!
// localStorage — tersimpan permanen localStorage.setItem('nama', 'Budi Santoso'); localStorage.setItem('tema', 'dark'); // sessionStorage — hanya selama tab terbuka sessionStorage.setItem('langkahForm', '2'); // Menyimpan object? Gunakan JSON.stringify! const user = { nama: 'Budi', umur: 25, kota: 'Jakarta' }; localStorage.setItem('userData', JSON.stringify(user));
Ambil Data — getItem()
Gunakan getItem(key) untuk mengambil data. Jika key tidak ada, hasilnya null.
const nama = localStorage.getItem('nama'); console.log(nama); // Output: "Budi Santoso" // Mengambil object — gunakan JSON.parse() const userRaw = localStorage.getItem('userData'); const user = JSON.parse(userRaw); console.log(user.nama); // Output: "Budi" console.log(user.kota); // Output: "Jakarta"
Hapus Data — removeItem() & clear()
// Hapus satu item saja localStorage.removeItem('nama'); // Hapus SEMUA data localStorage (hati-hati!) localStorage.clear();
Cek Jumlah Item — .length
console.log(localStorage.length); // Total item tersimpan // Iterasi semua key for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); console.log(key, localStorage.getItem(key)); }
Web Storage hanya bisa menyimpan string. Untuk menyimpan array atau object, kamu wajib menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat mengambilnya. Ini adalah pola yang paling sering dipakai dalam dunia nyata!
🛠️ Proyek Mini: To-Do List dengan localStorage JavaScript
Teori tanpa praktik itu membosankan. Yuk langsung bangun aplikasi To-Do List sederhana yang datanya tetap tersimpan walau browser di-refresh! Inilah keajaiban localStorage untuk menyimpan data di browser secara nyata.
📄 index.html
<div id="app"> <h1>📝 To-Do List</h1> <input type="text" id="inputTodo" placeholder="Tambah tugas baru..."> <button onclick="tambahTodo()">Tambah</button> <ul id="listTodo"></ul> </div>
⚡ script.js
// Ambil data saat halaman pertama kali dibuka let todos = JSON.parse(localStorage.getItem('todos')) || []; function tampilkanTodo() { const list = document.getElementById('listTodo'); list.innerHTML = ''; todos.forEach((todo, index) => { list.innerHTML += `<li> ${todo} <button onclick="hapusTodo(${index})">❌</button> </li>`; }); } function tambahTodo() { const input = document.getElementById('inputTodo'); if (!input.value.trim()) return; todos.push(input.value.trim()); localStorage.setItem('todos', JSON.stringify(todos)); // Simpan! input.value = ''; tampilkanTodo(); } function hapusTodo(index) { todos.splice(index, 1); localStorage.setItem('todos', JSON.stringify(todos)); // Update! tampilkanTodo(); } // Jalankan saat halaman dimuat tampilkanTodo();
Perhatikan pola ambil → modifikasi → simpan? Itu adalah workflow standar localStorage dalam aplikasi nyata. Kamu tidak bisa langsung "push" ke localStorage — kamu harus ambil array-nya dulu, modifikasi, lalu simpan ulang sebagai string JSON.
🎯 Kapan Menggunakan localStorage vs sessionStorage untuk Menyimpan Data Browser?
Memilih antara keduanya bukan soal mana yang lebih "canggih" — tapi soal kebutuhan datanya. Gunakan analogi ini:
🗺️ Panduan Memilih Storage yang Tepat
Pilih localStorage
- Preferensi tema (dark/light mode)
- Bahasa pilihan pengguna
- History pencarian
- Data onboarding / tutorial
- Bookmark atau favorit
Pilih sessionStorage
- Data form multi-langkah
- Status langkah wizard checkout
- Filter sementara halaman
- Data autentikasi sesi
- Undo/redo sementara
Jangan simpan data sensitif seperti password, token autentikasi penting, atau informasi kartu kredit di localStorage/sessionStorage! Keduanya rentan terhadap serangan XSS (Cross-Site Scripting). Untuk data sensitif, gunakan cookie dengan flag HttpOnly dan Secure, atau simpan di server.
Mau lihat isi localStorage langsung? Buka DevTools browser (F12) → tab Application → lihat bagian Storage → Local Storage. Di sana kamu bisa melihat, mengedit, bahkan menghapus data secara manual. Fitur wajib untuk debugging!
JavaScript from Zero to Zorro
14 Artikel belajar JavaScript dari nol hingga bisa bikin aplikasi web nyata
