sessionStorage vs localStorage

sessionStorage dan localStorage merupakan Web Storage API yang menyediakan mekanisme yang memungkinkan browser menyimpan pasangan key / value dengan aman.

Sebelum menggunakan Web Storage, kita dapat memeriksa browser dengan cara berikut:

if (typeof (Storage) !== 'undefined')
  console.log('Browser anda support Web Storage');
else
  console.log('Browser anda tidak support Web Storage');

Basic concepts

Data yang disimpan pada sessionStorage dapat bertahan setelah refresh browser. Sementara pada localStorage, data bahkan bisa bertahan setelah restart browser. Key dan value selalu berupa string (seperti halnya object, integer keys akan secara otomatis diubah menjadi string). Kita dapat mengakses data yang disimpan seperti halnya object atau dengan metode Storage.getItem() and Storage.setItem().

Contoh penyimpanan data pada localStorage:

localStorage.warnaDasar = 'tomato';
localStorage['warnaDasar'] = 'tomato';
localStorage.setItem('warnaDasar', 'tomato');

Ketiga metode di atas menyimpan data pada entry (warnaDasar) yang sama, akan tetapi direkomendasikan untuk menggunakan Web Storage API (setItem, getItem, removeItem, key, length) untuk mencegah pitfalls

• setItem(key, value) - menyimpan item sebagai pasangan key/value.
• getItem(key) - membaca item berdasarkan key.
• removeItem(key) - menghapus item berdasarkan key.
• clear() - menghapus semuanya.
• key(index) - membaca key berdasarkan index.
• length - total item tersimpan.

sessionStorage

sessionStorage hanya menyimpan data untuk satu sesi, data yang disimpan akan terhapus saat sesi bearkhir, baik dengan menutup tab maupun menutup browser.

• Setiap kali kita buka dokumen di tab baru pada browser, sesi halaman unik dibuat dan ditetapkan untuk tab tersebut. Sesi halaman itu hanya berlaku untuk tab (tertentu) itu.
• Sesi halaman berlangsung selama tab atau browser terbuka, dan bertahan setiap kali halaman di-refresh ataupun di-restore.
• Membuka halaman di tab atau window baru, akan membuat sesi baru, berbeda dari cara kerja session cookies.
• Membuka beberapa tab / window (meskipun) dengan URL yang sama, akan tetap membuat sessionStorage berbeda untuk masing-masing tab / window. Akan tetapi sessionStorage yang sama dapat diakses dari iframe pada halaman yang sama (tentunya apabila yang diakses adalah URL dengan origin yang sama).
• Menutup tab / window akan mengakhiri sesi dan menghapus object di sessionStorage.

Data yang disimpan di sessionStorage dikhususkan untuk protokol halaman. Maksudnya, data yang disimpan oleh skript di situs yang diakses dengan HTTP (misalnya, http://contoh.com) disimpan di object sessionStorage yang berbeda dari situs yang sama yang diakses dengan HTTPS (misalnya, https://contoh.com).

Examples

// Menyimpan data di sessionStorage
sessionStorage.setItem('dataSaya', 'rahasia');

// Membaca data yang tersimpan di sessionStorage
const data = sessionStorage.getItem('dataSaya');
console.log(data); // logs "rahasia"

// Menghapus data dari sessionStorage
sessionStorage.removeItem('dataSaya');
console.log(sessionStorage.getItem('dataSaya')); // logs null

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

localStorage

localStorage memungkinkan kita untuk mengakses storage object untuk origin dokumen, yang nantinya dapat diakses dari seluruh sesi browser. Berbeda dengan sessionStorage, data yang disimpan di localStorage dapat bertahan meskipun browser di-restart dan juga tidak kadaluarsa. Sehingga data yang disimpan masih dapat diakses bertahun-tahun kemudian, kecuali dihapus oleh user.

Data yang disimpan di localStorage dikhususkan untuk protokol halaman. Maksudnya, data yang disimpan oleh skript di situs yang diakses dengan HTTP (misalnya, http://contoh.com) disimpan di object localStorage yang berbeda dari situs yang sama yang diakses dengan HTTPS (misalnya, https://contoh.com).

Examples

// Menyimpan data di localStorage
localStorage.setItem('burungku', 'Beo');

// Membaca data yang tersimpan di localStorage
const burung = localStorage.getItem('burungku');
console.log(burung); // logs "Beo"

// Menghapus data dari localStorage
localStorage.removeItem('burungku');
console.log(sessionStorage.getItem('burungku')); // logs null

// Menghapus semua data di localStorage
localStorage.clear();

Conclusion

• Berbeda dengan cookies, Web Storage menyimpan data secara lokal (pada browser) sehingga tidak dapat diakses dari server.
• Web Storage menyediakan tempat penyimpanan yang cukup besar (sekitar 10MB tergantung pada browser dan ruang penyimpanan kosong pada hard disk)
• Penyimpanan terikat ke asal (domain / protokol / port triplet). Artinya, protokol atau sub-domain yang berbeda menggunakan storage object yang berbeda, sehingga tidak dapat mengakses data satu sama lain.

Credit

Image by Richy Greatfrom Unsplash