Storan tempatan HTML5 Storan tempatan, penggunaan asas sessionStorage, operasi traversal, pengendalian pengecualian, dsb._html5 kemahiran tutorial

Kaedah penggunaan localStorage dan sessionStorage dalam API storan tempatan HTML5 adalah sama. Perbezaannya ialah sessionStorage dikosongkan selepas menutup halaman, manakala localStorage akan sentiasa disimpan. Di sini kami mengambil localStorage sebagai contoh untuk memperkenalkan secara ringkas storan tempatan HTML5 dan menyediakan beberapa contoh untuk masalah biasa seperti traversal. localStorage ialah API storan tempatan HTML5, yang menggunakan pasangan nilai kunci untuk mengakses data Data yang diakses hanya boleh dalam rentetan. Penyemak imbas yang berbeza mempunyai sokongan yang berbeza untuk API ini, seperti kaedah penggunaan, ruang storan maksimum, dsb.

1. Penggunaan asas API Storan tempatan

Penggunaan localStorage API adalah mudah dan mudah difahami Berikut ialah operasi dan contoh API biasa: Tetapkan data: localStorage.setItem(key,value Contoh:

Salin kod

Kod adalah seperti berikut:

for(var i=0; i<10; i){
localStorage .setItem(i,i) ;
}

Dapatkan data: localStorage.getItem(key) Dapatkan semua data: localStorage.valueOf() Contoh:

Salin Kod

Kod tersebut adalah seperti berikut:

for(var i=0; i<10; i){
localStorage.getItem( i);
}

Padam data: localStorage.removeItem(key) Contoh:

Salin kod

Kod adalah seperti berikut:

for(var i=0; i<5; i ){
localStorage.removeItem(i);
}

Kosongkan semua data: localStorage.clear() Dapatkan bilangan data storan setempat ：localStorage.length Dapatkan nilai utama data N: localStorage.key(N)

2. Kaedah nilai kunci kekunci traverse

Salin kod

Kod adalah seperti berikut :

for(var i=localStorage.length - 1; i >=0; i--){
console.log('(i 1) 'th data Nilai utama ialah: ' localStorage.key(i) ', datanya ialah: ' localStorage.getItem(localStorage.key(i)));
}

3. Ujian had saiz storan dan pengendalian pengecualian

3.1 Ujian had saiz storan data

Pelayar yang berbeza pada asasnya mempunyai had pada saiz storan tempatan HTML5 Keputusan ujian adalah seperti berikut:

Salin kodKodnya adalah seperti berikut:

IE 9 > 4999995 5 = 5000000

firefox 22.0 > 1440
safari 5.1 > 2621435 5 = 2621440
opera 12.15 >
Rujukan kod ujian:

Salin kod

Kod tersebut adalah seperti berikut:

log fungsi( msg ) {

console.log(msg);

alert(msg);
}< ;/p>

var limit;
var half = '1'; //Ini akan ditukar kepada bahasa Cina dan dijalankan semula
var str = separuh;
var sstr;
manakala ( 1 ) {
cuba {
localStorage.clear();
str = separuh;
localStorage.setItem( 'cache', str );
separuh = str;
} tangkapan ( ex ) {
putus;
}
}
var base = str.length;
var off = base / 2;
var isLeft = 1;
while ( off ) {
jika ( isLeft ) {
end = base - (off / 2);
} else {
end = base (off / 2);
}

sstr = str.slice( 0, end );
localStorage.clear();
cuba {
localStorage.setItem( 'cache', sstr );
had = sstr. panjang;
isLeft = 0;
} tangkapan ( e ) {
isLeft = 1;
}

asas = hujung;
mati = Math.floor( off / 2 );
}

log( 'had: ' had );

3.2 Behandlung von Datenspeicherausnahmen

Code kopieren

Der Code lautet wie folgt:

versuchen Sie{
localStorage .setItem( key, value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('Lokales Speicherlimit überschritten!');
// Wenn die historischen Informationen nicht mehr wichtig sind, können Sie sie löschen und dann erneut festlegen
localStorage.clear();
localStorage.setItem(key, value);
}
}