Penjelasan terperinci tentang Metode Penyimpanan HTML5 Sesi Sesi dan LocalStorage

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.

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