Fitur localStorage pada Javascript telah didukung dari sejak lama, tapi penggunaannya masih tergolong jarang sekali dimanfaatkan oleh web-developer, mungkin entah karena terlalu terpaku oleh framework javascript seperti jQuery, informasi-nya tidak begitu diketahui, atau para web-developer tidak mendapatkan penjelasan yang tepat dalam kegunaan dari localStorage ini.

Apa itu localStorage?

Secara nama dapat didefinisikan bahwa localStorage merupakan penyimpanan local, yang dapat diakses oleh Javascript pada sisi client, dan data yang dimaksud akan disimpan oleh browser sesuai dengan domain dari web yang sedang berjalan. localStorage hanya dapat diakses oleh (sub) domain yang melakukan inisialisasi, dan hanya dapat diakses dengan menggunakan script pada browser secara local client. Berbeda dengan cookie yang selalu dikirimkan browser setiap kali melakukan request HTTP(s), localStorage tidak dapat diakses secara server-side (kecuali datanya dikirimkan manual ke server dengan ajax atau request HTTP lainnya).

Apa Kegunaannya?

Sesuai namanya, localStorage merupakan sarana penyimpanan, dimaka Kita dapat melakukan meyimpanan dan melakukan pembacaan data yang disimpan. localStorage merupakan fasilitas penyimpanan primitif bukan database, sehingga tidak dapat dijadikan saranan penyimpanan data-data kompleks, tapi bukan berarti tanpa kegunaan yang sangat bermanfaat. Biasanya localStorage digunakan untuk menyimpan state dari suatu layanan web, misalnya pada saat ini theme yang digunakan apa, video yang sedang berjalan berada pada posisi apa, atau ukuran huruf yang sedang digunakan user seberapa besar. Itu semua bisa dengan mudah disimpan di dalam localStorage yang ketika situs yang dimaksud dilakukan refresh, Kita dapat mengetahui kondisi sebelumnya seperti apa, dan dapat Kita manfaatkan untuk membuat sebuah aplikasi berbasis web dengan state yang konsisten.

Cara Akses localStorage

Untuk mengakses localStorage dapat langsung dengan memanggil object localStorage yang merupakan elemen dari object window, seperti berikut ini:

if (localStorage in window){
  var theme = localStorage.getItem("theme");
}
else{
  /* Browser tidak mendukung localStorage */
}

Pada script di atas, dilakukan peng-cekan kalau browser mendukung localStorage dengan cara mencek apakah localStorage ada di dalam object window. Kemudian menjalankan fungsi getItem untuk mengambil localStorage dengan kunci “theme”. CATATAN: Pada script di atas nilai variabel theme akan berisi null, karena localStorage dengan kunci “theme” belum pernah disimpan sebelumnya. Untuk melakukan perubahan dapat dilakukan dengan menggunakan metode setItem, seperti pada contoh berikut:

if (localStorage in window){
  localStorage.setItem("theme", "dark");
}
else{
  /* Browser tidak mendukung localStorage */
}

Dengan memanggil metode setItem, maka isi data dari kunci yang dimaksud “theme” akan diubah menjadi “dark”, maka ketika memanggil metode getItem selanjutnya dengan kunci “theme” return yang didapat akan berisi “dark”.

Kondisi ini akan tetap terjadi pada pemanggilan getItem-getItem selanjutnya sampai nilai dari data tersebut diubah dengan setItem, dihapus dengan removeItem atau di hapus dengan metode localStorage.clear() yang akan mengosongkan lagi isi localStorage.

Selalu diingat, localStorage ini berkaitan erat dengan browser yang digunakan dan sub-domain web yang digunakan, sehingga bila Kita melakukan getItem pada (sub) domain yang berbeda, maka isi dari localStorage yang sebelumnya di set tidak akan bisa dibaca, begitu juga bila setItem dilakukan pada browser Chrome misalnya, lalu Kita membuka halaman web yang sama pada Edge, maka isi localStorae tersebut tidak dapat terbaca. Pada satu web-browser yang sama pun, bila Kita membuka jendela baru dengan mode incignito/privacy, maka secara otomatis isi dari localStorage dari tab incignito tersebut akan dikosongkan.

Kesimpulan

Artikel ini mungkin singkat dan tidak menjelaskan dengan detail tentang cara penggunaan localStorage, tapi setidaknya dengan informasi ini dapat memberikan wawasan yang lebih luas dan mungkin mendapatkan ide untuk implementasi aplikasi berbasis web dengan memanfaatkan localStorage sebagai saranan untuk menyimpan data state aplikasi.

Terima Kasih, dan sampai jumpa pada artikel-artikel selanjutnya..