Penjelasan terperinci tentang perkara utama menggunakan localStorage dalam kemahiran JavaScript_javascript

localStorage digunakan terutamanya untuk menggantikan kuki dan menyelesaikan masalah kesukaran membaca dan menulis serta kapasiti kuki yang terhad (sila rujuk Perkara Utama untuk Menggunakan Kuki).

localStorage mempunyai ciri berikut

1.localStorage ialah objek biasa dan operasi pada mana-mana objek boleh digunakan.

2. Nilai atribut objek localStorage hanya boleh menjadi rentetan.

Ini memerlukan perhatian khusus. Katakan kita ingin menyimpan objek ke localStorage Kita boleh menggunakan splicing. Seperti

var obj = {
"na=me": "chua",
age: 9
}
//拼接到localStorage
var str = "";
for(var i in obj){
str += encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]) + ";"
}
str = str.substring(0,str.length - 1);
localStorage.testObj = str;
//解析出来
var strA = localStorage.testObj.split(";");
var newObj = {};
for(var i = 0; i < strA.length; i++){
var tmp = strA[i].split("=");
newObj[decodeURIComponent(tmp[0])] = decodeURIComponent(tmp[1]);
}

Sudah tentu, anda juga boleh menggunakan kelas JSON untuk menukar objek kepada rentetan dan menyimpannya, dan kemudian menukar rentetan json ke dalam format objek json yang benar-benar boleh digunakan apabila mengeluarkannya

3 Saiz ruang lalai yang disokong oleh localStorage ialah 5M, yang disokong dengan baik oleh pelayar moden

Meminjam potongan storan tempatan HTML5 LocalStorage xiaowei0705

Script House mengingatkan semua orang untuk ambil perhatian bahawa ialah apabila menggunakannya pada telefon mudah alih, anda perlu membuka ruang memori di latar belakang untuk menyokongnya.

"QUOTA_EXCEEDED_ERR" adalah pengecualian Jika kapasiti storan yang anda gunakan melebihi had (5M), pengecualian ini akan dilaporkan

4.localStorage sendiri mempunyai kaedah

Tambah pasangan nilai kunci: localStorage.setItem(kunci,nilai)

Dapatkan nilai kunci: localStorage.getItem(key)

Padamkan pasangan nilai kunci: localStorage.removeItem(key).

Kosongkan semua pasangan nilai kunci: localStorage.clear().

Dapatkan nama hartanah (nama kunci) localStorage: localStorage.key(index).

Terdapat juga panjang sifat yang berbeza daripada objek biasa:

Dapatkan bilangan pasangan nilai kunci yang disimpan dalam localStorage: localStorage.length.

Contoh berikut digunakan untuk mendapatkan pasangan nilai kunci localStorage

for(var i=0;i<localStorage.length;i++){
console.log(localStorage.key(i)+ " : " + localStorage.getItem(localStorage.key(i)));
} 

Berdasarkan prinsip mempercayai kaedah asli, kaedah asli harus digunakan sebaik mungkin untuk mengendalikan localStorage. Walau bagaimanapun, kadangkala ralat QUOTA_EXCEEDED_ERR yang pelik berlaku apabila memanggil setItem() pada iPhone/iPad. Penyelesaiannya adalah untuk removeItem() sebelum setItem. Jadi berdasarkan isu keserasian ini, nampaknya menggunakan objek untuk menambah/memadam pasangan nilai kunci adalah lebih mudah dan lebih serasi.

acara 5.localStorage

Acara storan localStorage tidak boleh membatalkan tindakan storan dalam pengendali acara storan.

Acara storan hanyalah pemberitahuan yang diberikan oleh penyemak imbas kepada anda selepas data localStorage berubah. Perhatikan bahawa syarat di sini ialah data telah benar-benar berubah. Dalam erti kata lain, jika kawasan storan semasa kosong, acara tidak akan dicetuskan jika anda memanggil clear() sekali lagi. Atau jika anda menggunakan setItem() untuk menetapkan nilai yang sama dengan nilai sedia ada, peristiwa itu tidak akan dicetuskan. Ia akan dicetuskan apabila kawasan storan berubah Ini mengandungi banyak sifat berguna:

•Kawasan storan: Menunjukkan jenis storan (Sesi atau Setempat)
•kunci: kunci item yang ditukar
•oldValue: nilai asal kunci
•newValue: nilai baharu kunci
•url*: URL tempat perubahan kunci berlaku

Nota: Atribut url ialah atribut uri dalam spesifikasi awal. Beberapa penyemak imbas telah dikeluarkan lebih awal dan tidak menyertakan perubahan ini. Atas sebab keserasian, sebelum menggunakan atribut url, anda harus menyemak dahulu sama ada ia wujud Jika tiada atribut url, anda harus menggunakan atribut uri

PS: Penyimpanan dan pembacaan adalah perkara biasa dalam Firefox dan Chrome, tetapi nampaknya terdapat masalah dengan mencetuskan peristiwa storan Chrome boleh mencetuskan acara storan halaman ini dengan mengubah suai halaman Firefox sendiri tidak mencetuskan tetingkap selepas mengubah suai peristiwa storan, tetapi apabila mengakses A.html dan B.html pada masa yang sama, melaksanakan setItem pada halaman A boleh mencetuskan peristiwa penyimpanan tetingkap dalam halaman B. Begitu juga, melaksanakan setItem pada halaman B boleh mencetuskan peristiwa storan tetingkap pada halaman A. Dalam IE9 , nilai tetapan halaman itu sendiri boleh mencetuskan peristiwa storan halaman semasa, dan nilai tetapan halaman semasa juga boleh mencetuskan peristiwa storan tetingkap halaman lain di bawah yang sama "asal". Ini nampaknya lebih munasabah Contohnya, PrimeTechBlog disyorkan Percubaan pertama WebStorage-localstorage

Oleh itu, adalah disyorkan untuk menulis fungsi pemprosesan yang serasi untuk penyemak imbas yang serasi atau sekadar tidak menggunakan acara storan.

Contoh

if (window.addEventListener) {
window.addEventListener("storage", handle_storage, false);
} else {
window.attachEvent("onstorage", handle_storage);
};
function handle_storage(e) {
if (!e) { e = window.event; }
//响应代码部分 ...
} 

Beberapa perkara kecil:

LocalStorage mesti diakses melalui nama domain untuk berfungsi

Jika kaedah clear() dipanggil, kunci, oldValue dan newValue semuanya akan ditetapkan kepada null.

LocalStorage digunakan dengan cara yang sama

•localStorage - storan data tanpa had masa
•sessionStorage - Storan data untuk sesi

localStorage menyediakan beberapa kaedah:

1. Storan: localStorage.setItem(kunci, nilai)

Jika kunci wujud, kemas kini nilai

2. Dapatkan: localStorage.getItem(key)

Jika kunci tidak wujud, kembalikan null

3 Padam: localStorage.removeItem(key)

Setelah dipadamkan, semua data yang sepadan dengan kunci akan dipadamkan

4 Kosongkan semua: localStorage.clear()

Kadangkala terlalu menyusahkan untuk menggunakan removeItem untuk memadam satu persatu Anda boleh menggunakan clear, yang akan mengosongkan semua data yang disimpan oleh objek localStorage

5. Lintas kunci yang disimpan dalam localStorage

.length Jumlah data, contohnya: localStorage.length
.key(index) mendapat kunci, contohnya: var key=localStorage.key(index);

6. Simpan data dalam format JSON

JSON.stringify(data) Tukar objek kepada rentetan data dalam format JSON dan kembalikan rentetan yang ditukar
JSON.parse(data) menghuraikan data ke dalam objek dan mengembalikan objek yang dihuraikan

Nota: Data yang disimpan dalam localStorage tidak boleh dikongsi merentas penyemak imbas Satu penyemak imbas hanya boleh membaca data penyemak imbasnya sendiri dan ruang storan ialah 5M.