Penjelasan terperinci tentang kemahiran tutorial kaedah penyimpanan HTMl5 sessionStorage dan localStorage

Penjelasan terperinci tentang kemahiran tutorial kaedah penyimpanan HTMl5 sessionStorage dan localStorage_html5

WBOY

Lepaskan： 2016-05-16 15:48:12

asal

1669 orang telah melayarinya

Oleh itu sessionStorage bukanlah storan tempatan yang berterusan, hanya storan peringkat sesi. LocalStorage digunakan untuk storan setempat yang berterusan Melainkan data dipadamkan secara aktif, data tidak akan luput.
1. Perbezaan antara storan web dan kuki
Konsep storan web adalah serupa dengan kuki, tetapi perbezaannya ialah ia direka untuk storan kapasiti yang lebih besar. Saiz kuki adalah terhad, dan kuki akan dihantar setiap kali anda meminta halaman baharu, yang membazir lebar jalur Selain itu, kuki perlu menentukan skop dan tidak boleh dipanggil merentas domain.
Selain itu, Storan Web mempunyai kaedah setItem, getItem, removeItem, clear dan lain-lain Tidak seperti kuki, pembangun bahagian hadapan perlu merangkum setCookie dan getCookie sendiri.
Tetapi Kuki juga amat diperlukan: Kuki digunakan untuk berinteraksi dengan pelayan dan wujud sebagai sebahagian daripada spesifikasi HTTP, manakala Storan Web hanya dicipta untuk "menyimpan" data secara setempat (Pembetulan daripada @otakustay)
2. Sokongan penyemak imbas untuk storan web html5
Kecuali IE7 dan ke bawah, pelayar standard lain disokong sepenuhnya (iaitu dan FF perlu berada dalam pelayan web) Jalankan), perlu dinyatakan bahawa IE sentiasa melakukan kebaikan Sebagai contoh, UserData dalam IE7 dan IE6 sebenarnya adalah penyelesaian untuk storan tempatan javascript. Melalui enkapsulasi kod ringkas, semua pelayar boleh disatukan untuk menyokong storan web.
Untuk menentukan sama ada penyemak imbas menyokong localStorage, anda boleh menggunakan kod berikut:

Salin kod

Kod adalah seperti berikut:

if(window.localStorage){
alert("Menyemak imbas menyokong localStorage")
}
lain
{
alert("Menyemak imbas tidak menyokong localStorage")
}
//atau if(typeof window.localStorage == 'undefined'){ alert("Browsing does not support localStorage yet") }

3. LocalStorage dan operasi sessionStorage
Kedua-dua localStorage dan sessionStorage mempunyai kaedah operasi yang sama, seperti setItem, getItem dan removeItem, dll.
Kaedah localStorage dan sessionStorage:
setItem menyimpan nilai
Penggunaan: Store nilai ke dalam medan kunci
Penggunaan: .setItem(kunci, nilai)
Contoh kod:

Salin kod

Kodnya adalah seperti berikut:

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem mendapat nilai
Tujuan: Dapatkan kunci yang ditentukan nilai Simpanan setempat
Penggunaan: .getItem(key)
Contoh kod:

Salin kod

Kodnya adalah seperti berikut :

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");Salin kod

Kod adalah seperti berikut:

sessionStorage.removeItem("key");
kosongkan bersih semua kunci/nilai

Tujuan: kosongkan semua Kekunci/nilai

penggunaan: .clear() Contoh kod:

Salin kod

Kod tersebut adalah seperti berikut :

sessionStorage.clear();
localStorage.clear();

4 . Kaedah operasi lain: operasi titik dan []

Storan web Bukan sahaja anda boleh menggunakan setItem anda sendiri, getItem, dsb. untuk akses yang mudah, tetapi anda juga boleh menggunakan operator titik (.) dan [] untuk simpan data seperti objek biasa, seperti kod berikut:

Salin kod

Kodnya adalah seperti berikut:
storan var = window.localStorage; storage.key1 = "hello";
storage["key2"] = "world";
console.log(storage.key1); console.log(storage["key2"]);

5. localStorage Laksanakan traversal dengan atribut kunci dan panjang sessionStorageKunci() dan panjang disediakan oleh sessionStorage dan localStorage boleh melaksanakan traversal data yang disimpan dengan mudah, seperti kod berikut:

Salin kod

Kodnya adalah seperti berikut:

storan var = window.localStorage;
untuk (var i=0, len = storage.length; i < len; i )
{
var key = storage.key( i);
nilai var = storage.getItem(key);
console.log(key "=" value);
Storan juga menyediakan acara storan Apabila nilai kunci berubah atau dikosongkan, peristiwa storan boleh dicetuskan Contohnya, kod berikut menambah pendengar untuk perubahan acara storan. >

Salin kod
Kod adalah seperti berikut:

if(window.addEventListener){

window.addEventListener("storage",handle_storage, false);

}lain jika(window.attachEvent){ window.attachEvent("onstorage",handle_storage); > if( !e){e=window.event;} }

Atribut khusus objek acara storan adalah seperti berikut: