Web Storage HTML5
Penyimpanan Lokal Browser
Sebelum HTML5, data aplikasi web di sisi klien (client-side) disimpan menggunakan Cookie. Namun Cookie memiliki keterbatasan ukuran (maksimal 4KB) dan selalu dikirimkan bersama setiap HTTP request sehingga memperlambat kinerja.
HTML5 menyediakan HTML5 Web Storage yang memungkinkan aplikasi web menyimpan data secara lokal di browser pengguna dengan kapasitas jauh lebih besar (hingga 5MB - 10MB) tanpa membebani lalu lintas server.
Dua Jenis HTML5 Web Storage
HTML5 Web Storage menyediakan dua objek utama untuk menyimpan data dalam bentuk pasang key: value:
-
localStorage: Data disimpan secara permanen di browser dan tidak akan hilang meskipun browser ditutup atau komputer direstart (sampai dihapus manual via kode/clear cache). -
sessionStorage: Data hanya disimpan sementara selama satu sesi tab browser. Data akan langsung terhapus begitu tab atau window browser ditutup.
1. Penggunaan localStorage
Data di dalam localStorage disimpan dalam bentuk string.
Menambah atau Memperbarui Data (setItem)
// Menyimpan nama pengguna dan tema aplikasi
localStorage.setItem("username", "BudiSantoso");
localStorage.setItem("theme", "dark");
Membaca Data (getItem)
const username = localStorage.getItem("username");
console.log(username); // Output: BudiSantoso
Menghapus Item Tertentu (removeItem)
localStorage.removeItem("theme");
Menghapus Seluruh Data (clear)
localStorage.clear();
2. Penggunaan sessionStorage
Metode dan API pada sessionStorage sama persis dengan localStorage.
// Menyimpan data keranjang belanja selama sesi aktif
sessionStorage.setItem("cart_count", "3");
// Mengambil data
const cart = sessionStorage.getItem("cart_count");
// Hapus item
sessionStorage.removeItem("cart_count");
3. Menyimpan Data Objek / Array (JSON)
Karena Web Storage hanya menerima tipe data string, jika kita ingin menyimpan data berupa objek JavaScript atau Array, kita perlu mengubahnya menjadi format JSON menggunakan JSON.stringify() saat menyimpan dan JSON.parse() saat membaca.
// Data Objek User
const user = {
id: 101,
nama: "Siti Rahma",
role: "Admin"
};
// SIMPAN: Ubah objek JS menjadi string JSON
localStorage.setItem("user_profile", JSON.stringify(user));
// BACA: Ubah string JSON kembali menjadi objek JS
const savedUser = JSON.parse(localStorage.getItem("user_profile"));
console.log(savedUser.nama); // Output: Siti Rahma
Ringkasan Perbandingan
| Fitur | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| Kapasitas | 4 KB | ~ 5MB - 10MB | ~ 5MB |
| Masa Kadaluarsa | Ditetapkan manual | Tidak pernah kadaluarsa | Hilang saat tab ditutup |
| Pengiriman Server | Ya (setiap HTTP Request) | Tidak | Tidak |
| Aksesibilitas | Klien & Server | Hanya Klien (JS) | Hanya Klien (JS) |
