Perbedaan Cookies, Session & Local Storage

Ketika kita bicara mengenai penyimpanan data lokal dalam web development, terdapat tiga metode yang umum digunakan: cookies, session storage, dan local storage. Ketiga metode ini memiliki kasus penggunaan yang berbeda beda baik dalam cara mereka menyimpan data, masa kadaluarsa, dan keamanannya.

Dalam artikel ini, kita akan menjelaskan perbedaan antara cookies, session storage, dan local storage, dan memberikan contoh penggunaan masing-masing.

Cookies

Cookies atau kuki merupakan kumpulan informasi kecil yang disimpan oleh browser. Dapat digunakan untuk menyimpan data yang terbilang tidak sensitif seperti user-preferences, dll.

Salah satu fitur utama dari cookies adalah tanggal kedaluwarsa. Cookies dapat diatur untuk kedaluwarsa setelah jumlah waktu tertentu. Ini artinya cookies dapat digunakan untuk mengingat preferensi pengguna bahkan setelah mereka menutup browser dan kembali ke situs web yang sama.

Penggunaan Cookies

Untuk mengatur dan mengambil nilai dari cookies dalam script JavaScript, kamu dapat menggunakan properti document.cookie. Nah, kamu bisa coba deh contoh berikut untuk mengatur cookie:

document.cookie = "location=Jakarta; expires=Thu, 01 Jan 2099 00:00:00 UTC;";

Nah, dalam contoh ini, kita mengatur cookie dengan nama location dan nilai Jakarta dengan tanggal kedaluwarsa pada 1 Januari 2099.

Untuk mengambil nilai dari cookies, kamu dapat menggunakan function getItem().

var user = document.cookie.getItem("location");

Session

Hampir sama dengan cookies karena memungkinkan Anda untuk menyimpan data di sisi klien. Sesion menyimpan informasi berupa key-value pair, Session storage hanya tersedia selama sesi pengguna. Yang berarti ketika pengguna menutup browser, data session storage akan secara otomatis dihapus. untuk penggunaan session dapat digunakan seperti untuk menyimpan keranjang belanja, session id, dll.

Penggunakan Session

Untuk menyimpan dan mengambil nilai dari session storage, Anda dapat menggunakan metode sessionStorage.setItem() dan sessionStorage.getItem(). Berikut adalah contoh cara menggunakan session storage:

// Simpan nilai ke session storage
sessionStorage.setItem("cartId", "23");

// Ambil nilai dari session storage
var cartId = sessionStorage.getItem("cartId");

// Hapus nilai dari session storage
sessionStorage.removeItem("cartId");

// Hapus semua data dari session storage
sessionStorage.clear();

Local Storage

Local storage digunakan untuk menyimpan data di sisi klien, tetapi berbeda dari cookies dan session storage dalam beberapa hal. Sama seperti session, local storage menyimpan data dalam bentuk key-value pair.

Namun tidak seperti session storage, data tersebut tetap bertahan meskipun pengguna menutup browser mereka. Ini berarti bahwa local storage dapat digunakan untuk menyimpan data yang perlu tersedia selama beberapa sesi atau bahkan selama beberapa kunjungan ke situs web.

Penggunaan Local Storage

Untuk menyimpan dan mengambil nilai dari local storage, kamu bisa gunakan metode localStorage.setItem() dan localStorage.getItem(). Berikut contoh penggunaannya:

// Simpan nilai ke local storage
localStorage.setItem("username", "John");

// Ambil nilai dari local storage
var username = localStorage.getItem("username");

// Hapus nilai dari local storage
localStorage.removeItem("username");

// Hapus semua data dari local storage
localStorage.clear();

Perbedaan antara Cookies, Session & Local Storage

Tabel dibawah ini memberikan gambaran perbandingan antara cookies, session & local storage.

Kesimpulan

Dalam membangun aplikasi web, pemilihan teknologi penyimpanan data yang tepat sangat penting untuk mencapai tujuan aplikasi yang diinginkan. Cookies, session storage, dan local storage, masing-masing memiliki kelebihan dan kekurangan yang perlu dipertimbangkan terlebih dahulu sebelum memutuskan untuk menggunakannya.

Pada umumnya, untuk penyimpanan data sederhana seperti preferensi pengguna, cookies dan local storage adalah pilihan yang tepat. Namun, untuk informasi yang lebih sensitif, seperti data autentikasi pengguna, session storage menjadi pilihan terbaik karena memberikan tingkat keamanan yang lebih tinggi dibandingkan cookies dan local storage. Sebagai pengembang aplikasi web, penting untuk memahami perbedaan dan karakteristik dari setiap teknologi penyimpanan data serta mempertimbangkan kebutuhan aplikasi untuk memilih teknologi yang tepat dan membuat keputusan yang bijak. 😃