Penjelasan terperinci tentang kemahiran tutorial kaedah penyimpanan HTMl5 sessionStorage dan localStorage_html5

WBOY
Lepaskan: 2016-05-16 15:48:12
asal
1643 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:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!