Objek penyimpanan web localStorage dan sessionStorage memungkinkan untuk menyimpan pasangan key/value di peramban. Show Yang menarik dari mereka adalah bahwa data bertahan dari refresh halaman (untuk sessionStorage) dan bahkan ketika peramban dimulai ulang secara penuh (untuk localStorage). Kita akan melihatnya segera. Kita sudah memiliki cookies. Mengapa perlu tambahan objek?
Kedua objek penyimpanan menyediakan method dan properti yang sama:
Seperti yang Anda lihat, ini seperti koleksi Map (setItem/getItem/removeItem), tetapi juga memungkinkan akses berdasarkan indeks dengan key(index). Mari kita lihat cara kerjanya. Demo localStorageFitur utama localStorage adalah:
Misalnya, jika Anda menjalankan kode ini…
localStorage.setItem('test', 1); …Dan kemudian menutup/membuka peramban atau hanya membuka halaman yang sama di jendela yang berbeda, maka Anda bisa mendapatkannya seperti ini:
alert( localStorage.getItem('test') ); // 1 Kita hanya harus berada di origin yang sama (domain/port/protocol), path urlnya bisa berbeda. localStorage dibagi antara semua window dengan origin yang sama, jadi jika kita mengatur data di satu window, perubahan akan terlihat di window lain. Akses seperti objekKita juga dapat menggunakan cara sebuah objek biasa untuk mendapatkan/mengatur key, seperti ini:
// mengatur key localStorage.test = 2; // mendapatkan key alert( localStorage.test ); // 2 // menghapus key delete localStorage.test; Itu diizinkan karena alasan historis, dan sebagian besar berfungsi, tetapi umumnya tidak disarankan, karena:
Pengulangan pada keysSeperti yang telah kita lihat, method menyediakan fungsionalitas “mendapatkan/mengatur/menghapus dengan key”. Tetapi bagaimana cara mendapatkan semua value atau key yang disimpan? Sayangnya, objek penyimpanan tidak bisa dilakukan iterasi. Salah satu caranya adalah dengan mengulangnya sebagai senarai (array):
for(let i=0; i<localStorage.length; i++) { let key = localStorage.key(i); alert(`${key}: ${localStorage.getItem(key)}`); } Cara lain adalah dengan menggunakan perulangan for key in localStorage, seperti yang kita lakukan dengan objek reguler. Ini melakukan iterasi pada key, tetapi juga menampilkan beberapa field bawaan yang tidak kita perlukan:
// Percobaan yang buruk for(let key in localStorage) { alert(key); // menampilkan getItem, setItem and hal bawaan lainnya } …Jadi kita perlu memfilter field dari prototype dengan pemeriksaan hasOwnProperty:
for(let key in localStorage) { if (!localStorage.hasOwnProperty(key)) { continue; // melewati keys seperti "setItem", "getItem" etc } alert(`${key}: ${localStorage.getItem(key)}`); } …Atau jika hanya mendapatkan key-nya saja dengan Object.keys dan kemudian dilakukan perulangan jika diperlukan:
let keys = Object.keys(localStorage); for(let key of keys) { alert(`${key}: ${localStorage.getItem(key)}`); } Yang terakhir berfungsi, karena Object.keys hanya mengembalikan kunci milik objek, mengabaikan prototype. Hanya stringHarap dicatat bahwa key dan value harus berupa string. Jika ada tipe lain, seperti angka, atau objek, itu akan dikonversi menjadi string secara otomatis:
localStorage.user = {name: "John"}; alert(localStorage.user); // [object Object] Kita dapat menggunakan JSON untuk menyimpan objek:
localStorage.user = JSON.stringify({name: "John"}); // kemudian let user = JSON.parse( localStorage.user ); alert( user.name ); // John Juga dimungkinkan untuk stringify seluruh objek penyimpanan, sebagai contoh untuk tujuan debugging:
// menambahkan opsi pemformatan pada JSON.stringify untuk membuat objek terlihat lebih bagus alert( JSON.stringify(localStorage, null, 2) ); sessionStorageObjek sessionStorage lebih jarang digunakan daripada localStorage. Properti dan method-nya sama, tetapi jauh lebih terbatas:
Mari kita lihat langsung prakteknya. Jalankan kode ini…
sessionStorage.setItem('test', 1); …Kemudian refresh halaman. Sekarang Anda masih bisa mendapatkan data:
alert( sessionStorage.getItem('test') ); // setelah refresh: 1 …Tetapi jika Anda membuka halaman yang sama di tab lain, dan mencoba lagi di sana, kode di atas mengembalikan null, yang berarti “tidak ada yang ditemukan”. Itu persis terjadi karena sessionStorage terikat tidak hanya pada origin, tetapi juga pada tab peramban. Oleh karena itu, sessionStorage jarang digunakan Event storageSaat data diperbarui di localStorage atau sessionStorage, event storage terpicu, dengan properti:
Yang penting adalah: event terpicu pada semua objek window tempat penyimpanan dapat diakses, kecuali yang menyebabkannya. Mari kita perjelas. Bayangkan, Anda memiliki dua window dengan situs yang sama di masing-masing window. Jadi localStorage dibagi di antara keduanya. Anda mungkin ingin membuka halaman ini di dua window peramban untuk menguji kode di bawah ini. Jika kedua window mendengarkan (listening) window.onstorage, maka masing-masing akan bereaksi terhadap pembaruan yang terjadi di window lainnya.
// memicu pembaruan yang dibuat ke penyimpanan yang sama dari dokumen lain window.onstorage = event => { //sama seperti window.addEventListener('storage', event => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); }; localStorage.setItem('now', Date.now()); Harap perhatikan bahwa event juga berisi: event.url – url dokumen tempat data diperbarui. Selain itu, event.storageArea berisi objek penyimpanan – event-nya sama untuk sessionStorage dan localStorage, jadi event.storageArea merujuk ke yang telah dimodifikasi. Kita bahkan mungkin ingin mengatur sesuatu kembali di dalamnya, untuk “merespons” perubahan. Itu memungkinkan window yang berbeda dari origin yang sama untuk bertukar pesan. Peramban modern juga mendukung Broadcast channel API, API khusus untuk komunikasi antar-jendela dengan origin yang sama, fiturnya lebih lengkap, tetapi kurang didukung. Ada libraries yang melakukan polifill API tersebut, berdasarkan localStorage, yang membuatnya tersedia di mana saja. RingkasanObjek penyimpanan web localStorage dan sessionStorage memungkinkan untuk menyimpan key/value di peramban.
API:
Event storage:
|