Panduan Menggunakan LocalStorage di JavaScript

Photo by Richy Great on Unsplash

Tulisan ini akan membahas panduan bagaimana menggunakan LocalStorage di JavaScript. Kamu perlu LocalStorage karena akan sangat berguna untuk berbagai kasus, misalnya untuk menyimpan data keranjang belanja, data personalisasi dan cache supaya akses website bisa lebih cepat.

Apa itu LocalStorage?

LocalStorage merupakan fitur di browser yang memungkin kita untuk menyimpan data (key-value pairs) di browser tanpa tanggal kadaluarsa. Ini berarti data yang disimpan di browser akan tetap ada walaupun browser telah di close. Berbeda dengan SessionStorage yang akan menyimpan data jika kondisi browser aktif, jika browser di tutup maka data akan dihapus otomatis. SessionStorage biasanya digunakan pada kasus data login perbankan, ketika kita login di web perbankan dan kita menutup browser maka data login otomatis akan hilang.

Menggunakan LocalStorage

Untuk menggunakan LocalStorage di aplikasi web kita, ada lima method yang dapat kita gunakan:

• setItem() : menambahkan key dan value ke dalam LocalStorage
• getItem() : digunakan untuk mendapatkan item dari LocalStorage
• removeItem() : menghapus item berdasarkan key dari LocalStorage
• clear() : digunakan untuk menghapus semua LocalStorage
• key() : digunakan untuk mendapatkan nama key berdasarkan index

setItem()

setItem() digunakan untuk menyimpan key dan value, untuk menggunakannya ada dua paramater yang harus di isi, yaitu key dan value nya.

 localStorage.setItem('name', 'Dikih Arif Wibowo')

paramater name adalah key, sedangkan Dikih Arif Wibowo adalah value nya. di LocalStorage hanya bisa menyimpan string. Untuk menyimpan array dan object kita perlu mengkonversinya ke dalam string. Untuk itu, gunakan method JSON.stringify() pada parameter value.

const person = {
    name: "Dikih Arif Wibowo",
    hobby: "reading",
}

window.localStorage.setItem('user', JSON.stringify(person));

getItem()

Untuk mendapatkan item dari LocalStorage kita menggunakan method getItem(), kita hanya perlu satu paremeter yaitu key. getItem() akan menghasilkan value string.

localStorage.getItem('user');

maka akan dihasilkan :

“{“name”:”Dikih Arif Wibowo”,”hobby”:”reading”}”

karna returnnya adalah string, maka untuk menggunakannya kita perlu mengkonversi ke dalam object. Kita gunakan method JSON.parse() untuk mengkonversi JSON string ke dalam object JavaScript.

JSON.parse(localStorage.getItem('user'));

removeItem()

Method removeItem() hanya butuh satu parameter yaitu nama key, untuk menghapus item LocalStorage.

localStorage.removeItem('name');

clear()

method clear() digunakan untuk menghapus semua item di LocalStorage aplikasi web kita. Method clear() tidak butuh parameter. Kita cukup memanggilnya seperti dibawah ini.

localStorage.clear();

key()

Method key() akan mereturn nama key berdasarkan index yang diberikan. Di browser Chrome untuk melihat item LocalStorage kita terdapat pada tab Application pada Chrome Dev Tools. Untuk menggunakan nya kita cukup butuh satu parameter yaitu index nya. Index dimulai dari 0.

var KeyName = window.localStorage.key(index);

Batasan LocalStorage

Untuk menggunakan LocalStorage cukup mudah, namun ada beberapa hal yang perlu diperhatikan :

• Jangan menyimpan data informasi user yang sensitive ke dalam LocalStorage.
• LocalStorage bukan pengganti Database pada server kita, LocalStorage hanya menyimpan data pada Browser.
• Maksimal kapatasitas yang dapat disimpan LocalStorage adalah 5MB (untuk semua browser).
• LocalStorage bersifat synchronous, setiap operasi yang dipanggil dijalankan satu persatu.

Terima kasih semoga tulisan ini bermanfaat untuk saya dan pembaca.

Referensi :

localStorage in JavaScript: A complete guide - LogRocket Blog

What Is Local Storage In JavaScript And How To Use It | Hacker Noon