Kommentar: In diesem Artikel wird hauptsächlich die grundlegende Verwendung von LocalStorage, SessionStorage, Traversal Operations, Ausnahmebehandlung usw. für den lokalen Speicher von HTML5 vorgestellt. Freunde, die es brauchen, können sich darauf beziehen.
Die lokale Speicher -Speicher -API von HTML5 entspricht der SessionStorage. Nehmen wir hier lokalstorage als Beispiel hier, um kurz die lokale Speicherung von HTML5 einzuführen und einige Beispiele für häufige Probleme wie Traversal zu geben. LocalStorage ist eine lokal gespeicherte HTML5 -API. Es verwendet Schlüsselwertpaare, um auf Daten zuzugreifen, und die Zugriffsdaten können nur eine Zeichenfolge sein. Verschiedene Browser haben eine andere Unterstützung für diese API, wie z. B. Verwendungsmethode, maximaler Speicherplatz usw.
1. Grundnutzungsmethoden der LocalStorage -API
Die LocalStorage -API ist leicht zu verstehen. Im Folgenden finden Sie allgemeine API -Operationen und Beispiele: Daten festlegen: localStorage.setItem (Schlüssel, Wert); Beispiel:
für (var i = 0; i <10; i ++) {
localStorage.setItem (i, i);
}
Daten abrufen: localStorage.getItem (Schlüssel) Alle Daten erhalten: LocalStorage.ValueOf () Beispiel:
localStorage.getItem (i);
}
Daten löschen: localStorage.removeItem (Schlüssel) Beispiel:
localStorage.removeItem (i);
}
Alle Daten löschen: localStorage.clear () Erhalten Sie die Anzahl der lokalen gespeicherten Daten: LocalStorage.Length Erhalten Sie den Schlüsselwert der n -ten Daten: LocalStorage.Key (n)
2. Iterieren Sie über die Schlüsselwertmethode der Schlüsselwert
für (var i = localStorage.length-1; i> = 0; i-) {
console.log ('' + (i + 1) + 'Der Schlüsselwert der Daten lautet:' + localStorage.Key (i) + ', und die Daten lautet:' + localStorage.getItem (localStorage.key (i));
}
3.. Speichergrößenbegrenzungstests und Ausnahmebehandlung
3.1 Datenspeichergrößenbegrenzungstest
Verschiedene Browser haben im Grunde genommen Einschränkungen für die lokale Speichergröße von HTML5. Die Ergebnisse eines Tests sind wie folgt:
Firefox 22.0> 5242875 + 5 = 5242880
Chrom 28.0> 2621435 + 5 = 2621440
Safari 5.1> 2621435 + 5 = 2621440
Opera 12.15> 5m (falls es es überschreitet, wird ein Dialogfeld angezeigt, in dem Anforderungen für mehr Speicherplatz angezeigt werden.)
Testcode -Referenz:
<! DocType html>
<html>
<kopf>
<Script>
Funktion log (msg) {
console.log (msg);
Alarm (MSG);
} </p> <p> var limit;
var halb = '1'; // Dies wird in Chinesisch geändert und wieder laufen
var str = halb;
var Strtr;
während (1) {
versuchen {
LocalStorage.Clear ();
str += halb;
LocalStorage.SetItem ('Cache', Str);
halb = str;
} catch (ex) {
brechen;
}
}
var base = str.length;
var off = base / 2;
var isleft = 1;
while (off) {
if (isleft) {
End = Basis - (aus / 2);
} anders {
End = Base + (Aus / 2);
} </p> <p> SSTR = str.slice (0, Ende);
LocalStorage.Clear ();
versuchen {
LocalStorage.SetItem ('Cache', Str);
limit = strtr.length;
Isleft = 0;
} catch (e) {
Isleft = 1;
} </p> <p> Base = Ende;
off = math.floor (off / 2);
} </p> <p> log ('limit:' + limit);
</script>
</html>
3.2 Ausnahmebehandlung für Datenspeicher
versuchen{
LocalStorage.SetItem (Schlüssel, Wert);
} catch (oException) {
if (oException.name == 'quotaexePeederError') {
console.log ('lokales Speicherlimit übertroffen!');
// Wenn die historischen Informationen nicht wichtig sind, können Sie sie löschen und dann festlegen
LocalStorage.Clear ();
LocalStorage.SetItem (Schlüssel, Wert);
}
}