Komentar: Artikel ini terutama memperkenalkan penggunaan dasar LocalStorage, sessionstorage, operasi traversal, penanganan pengecualian, dll. Untuk penyimpanan lokal HTML5. Teman yang membutuhkannya bisa merujuknya.
LocalStorage di API penyimpanan lokal HTML5 sama dengan Sesi Sesi, perbedaannya adalah bahwa SesiStorage dihapus setelah menutup halaman, sementara LocalStorage akan disimpan sepanjang waktu. Mari kita ambil LocalStorage sebagai contoh di sini untuk secara singkat memperkenalkan penyimpanan lokal HTML5 dan memberikan beberapa contoh untuk masalah umum seperti traversal. LocalStorage adalah HTML5 API yang disimpan secara lokal. Ini menggunakan pasangan nilai-kunci untuk mengakses data, dan data yang diakses hanya dapat berupa string. Browser yang berbeda memiliki dukungan yang berbeda untuk API ini, seperti metode penggunaan, ruang penyimpanan maksimum, dll.
1. Metode Penggunaan Dasar API LocalStorage
LocalStorage API mudah dimengerti. Berikut ini adalah operasi dan contoh API yang umum: setel data: localstorage.setitem (kunci, nilai); Contoh:
untuk (var i = 0; i <10; i ++) {
localstorage.setitem (i, i);
}
Dapatkan data: localstorage.getItem (key) Dapatkan semua data: localstorage.valueof () Contoh:
localstorage.getItem (i);
}
Hapus Data: LocalStorage.RemoveItem (Key) Contoh:
localstorage.removeitem (i);
}
Hapus semua data: localstorage.clear () Dapatkan jumlah data tersimpan lokal: localstorage.length mendapatkan nilai kunci dari data ke -n: localstorage.key (n)
2. Iterasi metode nilai kunci atas
untuk (var i = localstorage.length-1; i> = 0; i-) {
console.log ('' + (i + 1) + 'Nilai kunci dari data adalah:' + localstorage.key (i) + ', dan data adalah:' + localstorage.getItem (localstorage.key (i)));
}
3. Pengujian batas ukuran penyimpanan dan penanganan pengecualian
3.1 Uji Batas Ukuran Penyimpanan Data
Browser yang berbeda pada dasarnya memiliki batasan pada ukuran penyimpanan lokal HTML5. Hasil tes adalah sebagai berikut:
Firefox 22.0> 5242875 + 5 = 5242880
Chrome 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m (jika melebihi, kotak dialog yang memungkinkan permintaan lebih banyak ruang akan muncul)
Referensi Kode Uji:
<! Doctype html>
<Html>
<head>
<script>
function log (msg) {
console.log (msg);
peringatan (msg);
} </p> <p> Batas var;
var setengah = '1'; // Ini akan diubah menjadi Cina dan dijalankan lagi
var str = setengah;
var strtr;
while (1) {
mencoba {
localstorage.clear ();
str += setengah;
localstorage.setitem ('cache', str);
setengah = str;
} catch (ex) {
merusak;
}
}
var base = str.length;
var off = base / 2;
var isLeft = 1;
while (off) {
if (isLeft) {
end = base - (off / 2);
} kalau tidak {
end = base + (off / 2);
} </p> <p> sstr = str.slice (0, end);
localstorage.clear ();
mencoba {
localstorage.setitem ('cache', str);
batas = strtr.length;
isleft = 0;
} catch (e) {
isleft = 1;
} </p> <p> base = end;
OFF = Math.floor (OFF / 2);
} </p> <p> log ('batas:' + batas);
</script>
</html>
3.2 Penanganan Pengecualian Penyimpanan Data
mencoba{
localstorage.setitem (kunci, nilai);
} catch (oException) {
if (oException.name == 'qutaExededError') {
Console.log ('Batas penyimpanan lokal terlampaui!');
// Jika informasi historisnya tidak penting, Anda dapat menghapus dan mengaturnya
localstorage.clear ();
localstorage.setitem (kunci, nilai);
}
}