BAB 28 — Menguasai Storage & Cookies di JavaScript: localStorage, sessionStorage, Cookies, dan JSON

BAB 28 — Menguasai Storage & Cookies di JavaScript: localStorage, sessionStorage, Cookies, dan JSON

Menyimpan data di sisi klien adalah hal penting dalam pengembangan web modern. JavaScript menyediakan beberapa cara untuk menyimpan data, mulai dari localStorage, sessionStorage, hingga cookies.

Selain itu, untuk menyimpan objek kompleks, kita bisa memanfaatkan JSON serialize & deserialize. Bab ini akan membahas semuanya secara praktis.

1. localStorage: Menyimpan Data Permanen di Browser

localStorage memungkinkan kita menyimpan data di browser tanpa batas waktu. Data tetap tersimpan meskipun halaman ditutup atau browser direstart.

Contoh:

// Menyimpan data
localStorage.setItem("username", "JohnDoe");

// Membaca data
const user = localStorage.getItem("username");
console.log(user); // JohnDoe

// Menghapus data
localStorage.removeItem("username");

// Menghapus semua data
localStorage.clear();

Tips:

  • Hanya menyimpan string, jadi jika ingin menyimpan objek, gunakan JSON (akan dibahas nanti).
  • Kapasitas penyimpanan biasanya sekitar 5-10 MB.

2. sessionStorage: Data Hanya Sampai Sesi Browser Berakhir

Berbeda dengan localStorage, sessionStorage hanya bertahan sampai tab/browser ditutup. Cocok untuk data sementara.

Contoh:

// Menyimpan data sementara
sessionStorage.setItem("token", "abc123");

// Membaca data
console.log(sessionStorage.getItem("token")); // abc123

// Menghapus data
sessionStorage.removeItem("token");

// Menghapus semua data sesi
sessionStorage.clear();

Kapan digunakan: Data login sementara, wizard multi-step form, atau status sementara halaman.

3. Cookies Dasar

Cookies adalah cara lama menyimpan data di browser, tapi masih berguna terutama untuk server-side atau data yang perlu dikirim ke server.

Contoh:

// Menyimpan cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// Membaca semua cookie
console.log(document.cookie); // username=JohnDoe

// Menghapus cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Catatan:

  • Cookies memiliki batas ukuran ~4 KB per cookie.
  • Cookies otomatis dikirim ke server saat request.
  • Bisa ditambahkan atribut Secure, HttpOnly, dan SameSite untuk keamanan.

4. JSON Serialize & Deserialize: Menyimpan Objek dengan Aman

localStorage dan sessionStorage hanya bisa menyimpan string. Untuk menyimpan objek atau array, kita perlu serialize ke JSON dan deserialize saat membacanya.

Contoh:

const user = { name: "John", age: 30 };

// Serialize dan simpan
localStorage.setItem("user", JSON.stringify(user));

// Deserialize saat membaca
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // John

Kelebihan:

  • Bisa menyimpan objek, array, atau struktur data kompleks.
  • Memudahkan pengelolaan data di sisi klien.

Kesimpulan

Menguasai storage & cookies adalah kunci untuk pengalaman pengguna yang lebih baik di web:

  • localStorage: Data permanen di browser.
  • sessionStorage: Data sementara per sesi.
  • Cookies: Data ringan yang dikirim ke server.
  • JSON serialize & deserialize: Menyimpan data kompleks dengan aman.

Dengan pemahaman ini, developer bisa memilih metode penyimpanan yang tepat sesuai kebutuhan aplikasi.

Related Posts