Lokaler HTML5-Speicher localStorage, grundlegende Verwendung von sessionStorage, Durchlaufvorgänge, Ausnahmebehandlung usw._HTML5-Tutorial-Kenntnisse

Die Verwendungsmethoden von localStorage und sessionStorage in der lokalen Speicher-API von HTML5 sind dieselben. Der Unterschied besteht darin, dass sessionStorage nach dem Schließen der Seite gelöscht wird, während localStorage immer gespeichert wird. Hier nehmen wir localStorage als Beispiel, um den lokalen Speicher von HTML5 kurz vorzustellen und einige Beispiele für häufige Probleme wie Traversal bereitzustellen. localStorage ist die lokale HTML5-Speicher-API, die Schlüssel-Wert-Paare verwendet, um auf Daten zuzugreifen. Die abgerufenen Daten können nur Zeichenfolgen sein. Verschiedene Browser bieten unterschiedliche Unterstützung für diese API, z. B. Verwendungsmethoden, maximaler Speicherplatz usw.

1. Grundlegende Verwendung der localStorage API

Die Verwendung der localStorage-API ist einfach und leicht zu verstehen. Im Folgenden sind gängige API-Operationen und Beispiele aufgeführt: Daten festlegen: localStorage.setItem(key,value); Beispiel:

Code kopieren

Der Code lautet wie folgt:

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

Daten abrufen: localStorage.getItem(key) Alle Daten abrufen: localStorage.valueOf() Beispiel:

Code kopieren

Der Code lautet wie folgt:

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

Daten löschen: localStorage.removeItem(key) Beispiel:

Code kopieren

Der Code lautet wie folgt:

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

Clear alle Daten: localStorage.clear() Ermitteln Sie die Anzahl der lokalen Speicherdaten: localStorage.length Ermitteln Sie den Schlüsselwert der N-ten Daten: localStorage.key(N)

2. Schlüsselwertmethode durchqueren

Code kopieren

Der Code lautet wie folgt:

for(var i=localStorage.length - 1; i >=0; i--){
console.log('(i 1) 'th data Der Schlüsselwert ist: ' localStorage.key(i) ', die Daten sind: ' localStorage.getItem(localStorage.key(i)));
}

3. Prüfung der Speichergrößenbeschränkung und Ausnahmebehandlung

3.1 Test der Datenspeichergrößenbeschränkung

Verschiedene Browser haben grundsätzlich Einschränkungen hinsichtlich der lokalen Speichergröße von HTML5. Die Ergebnisse eines Tests sind wie folgt:

Code kopieren

Der Code lautet wie folgt:

IE 9 > 4999995 5 = 5000000
Firefox 22.0 > 5242875 5 = 5242880
Chrome 28.0 > 2621440
Safari 5,1 > 2621435 5 = 2621440
opera 12,15 > 5M (Wenn der Wert überschritten wird, wird ein Dialogfeld angezeigt, in dem Sie nach mehr Speicherplatz fragen können)

Testcode-Referenz:

Code kopieren

Der Code lautet wie folgt:

<script><br> function log( msg ) {<br> console.log(msg);<br> warning(msg);<br> }&lt ;/p> <p> var limit;<br> var half = '1' //Dies wird in Chinesisch geändert und erneut ausgeführt<br> var str = half;<br> var sstr;<br> while ( 1 ) { <br> try {<br> localStorage.clear();<br> str = half;<br> localStorage.setItem( 'cache', str );<br> half = str;<br> } Catch ( ex ) { <br> break;<br> }<br> }<br> var base = str.length;<br> var off = base / 2;<br> var isLeft = 1;<br> while ( off ) { <br> if ( isLeft ) {<br> end = base - (off / 2);<br> } else {<br> end = base (off / 2);<br> }</p> <p> sstr = str.slice( 0, end );<br> localStorage.clear();<br> try {<br> localStorage.setItem( 'cache', sstr );<br> limit = sstr. length;<br> isLeft = 0;<br> } Catch ( e ) {<br> isLeft = 1;<br> }</p> <p> base = end;<br> off = Math.floor( off / 2 );<br> }</p> <p> log( 'limit: ' limit );<br></script>

3.2 Gestion des exceptions de stockage de données

Copier le code

Le code est le suivant :

essayez{
localStorage .setItem( key, value);
}catch(oException){
if(oException.name == 'QuotaExceededError'){
console.log('Limite de stockage locale dépassée !');
// Si les informations historiques ne sont plus importantes, vous pouvez les effacer puis les redéfinir
localStorage.clear();
localStorage.setItem(key, value);
}
}