Komentar: Penyimpanan Web di HTML5 mencakup dua metode penyimpanan: Sesi Sesi dan LocalStorage. SessionStorage digunakan untuk menyimpan data dalam sesi secara lokal, yang hanya dapat diakses pada halaman dalam sesi yang sama dan data akan dihancurkan setelah sesi selesai.
Oleh karena itu, Sesi Sesi bukanlah penyimpanan lokal yang persisten, tetapi hanya penyimpanan tingkat sesi. LocalStorage digunakan untuk penyimpanan lokal yang persisten. Data tidak akan pernah kedaluwarsa kecuali secara aktif dihapus.1. Perbedaan antara penyimpanan web dan cookie
Konsep penyimpanan web mirip dengan cookie, perbedaannya adalah dirancang untuk penyimpanan kapasitas yang lebih besar. Ukuran cookie terbatas, dan setiap kali Anda meminta halaman baru, cookie akan dikirim, yang tanpa terlihat membuang -buang bandwidth. Selain itu, cookie perlu ditentukan ruang lingkup dan tidak dapat dipanggil lintas domain.
Selain itu, penyimpanan web memiliki setItem, getItem, removeItem, jelas dan metode lainnya. Tidak seperti cookie, pengembang front-end perlu merangkum setcookies dan getcookies sendiri.
Tetapi cookie juga sangat diperlukan: fungsi cookie adalah untuk berinteraksi dengan server dan ada sebagai bagian dari spesifikasi HTTP, sementara penyimpanan web hanya dibuat untuk menyimpan data secara lokal (koreksi dari @otakustay)
2. Status dukungan browser dari penyimpanan web HTML5
Kecuali untuk IE7 dan di bawah ini, browser standar lainnya sepenuhnya mendukungnya (IE dan FF perlu dijalankan di server web). Perlu disebutkan bahwa IE selalu melakukan hal -hal baik. Misalnya, UserData di IE7 dan IE6 sebenarnya merupakan solusi untuk penyimpanan lokal JavaScript. Melalui enkapsulasi kode sederhana, dapat disatukan untuk semua browser yang mendukung penyimpanan web.
Untuk menentukan apakah browser mendukung LocalStorage, Anda dapat menggunakan kode berikut:
Peringatan ("Jelajahi Dukungan LocalStorage")
}
kalau tidak
{
Peringatan ("Penjelajahan Tidak Mendukung LocalStorage")
}
// atau if (typeof window.localstorage == 'tidak terdefinisi') {alert ("browsing tidak mendukung localstorage")}
3. LocalStorage dan Sesi Operasi Sesi
LocalStorage dan sessionStorage keduanya memiliki metode operasi yang sama, seperti setitem, getItem dan removeItem, dll.
Metode LocalStorage dan SessionStorage:
nilai penyimpanan setitem
TUJUAN: Nilai menyimpan di bidang utama
Penggunaan: .setitem (kunci, nilai)
Contoh kode:
localstorage.setitem ("situs", "js8.in");
getItem mendapatkan nilai
Tujuan: Dapatkan nilai yang disimpan secara lokal di kunci yang ditentukan
Penggunaan: .getItem (kunci)
Contoh kode:
var situs = localstorage.getItem ("situs");
lepaskan kunci hapus
Tujuan: Hapus nilai yang disimpan secara lokal di kunci yang ditentukan
Penggunaan: .RemoveItem (Key)
Contoh kode:
localstorage.removeitem ("situs");
Hapus Hapus Semua Kunci/Nilai
Tujuan: Hapus semua kunci/nilai
Penggunaan: .clear ()
Contoh kode:
localstorage.clear ();
4. Metode Operasi Lainnya: Operasi Titik dan []
Penyimpanan web tidak hanya dapat menggunakan setitem sendiri, getItem, dll. Untuk memfasilitasi akses, tetapi juga menggunakan metode DOT (.) Dan [] untuk menyimpan data seperti objek biasa, seperti kode berikut:
var penyimpanan = window.localStorage; penyimpanan.key1 = "halo";
penyimpanan ["key2"] = "dunia";
Console.log (Storage.Key1);
console.log (penyimpanan ["key2"]);
5. Properti kunci dan panjang localstorage dan sessionstorage diimplementasikan untuk dilalui
Key () dan panjang yang disediakan oleh sessionStorage dan LocalStorage dapat dengan mudah menerapkan traversal data yang tersimpan, seperti kode berikut:
var penyimpanan = window.localStorage;
untuk (var i = 0, len = penyimpanan.length; i <len; i ++)
{
var key = penyimpanan.key (i);
var value = Storage.getItem (key);
console.log (tombol + "=" + nilai);
}
6. Acara Penyimpanan
Penyimpanan juga menyediakan acara penyimpanan. Ketika nilai kunci berubah atau jelas, acara penyimpanan dapat dipicu. Misalnya, kode berikut menambahkan perubahan acara penyimpanan:
window.addeventListener ("penyimpanan", handle_storage, false);
}
lain jika (window.attachevent)
{
window.attachevent ("onstorage", handle_storage);
}
function handle_storage (e) {
if (! e) {e = window.event;}
}
Properti spesifik dari objek acara penyimpanan adalah sebagai berikut:
PropertyTypedescription
Kunci keystring. Kunci bernama yang ditambahkan, dihapus, atau dimodifikasi
oldvalueany Nilai sebelumnya (sekarang ditimpa), atau nol jika item baru ditambahkan
newValueanythe Nilai baru, atau nol jika suatu item ditambahkan
url/uristring halaman yang memanggil metode yang memicu perubahan ini