Detaillierte Erläuterung der wichtigsten Punkte der Verwendung von localStorage in JavaScript_Javascript-Kenntnissen

localStorage wird hauptsächlich verwendet, um Cookies zu ersetzen und die Probleme der Lese- und Schreibschwierigkeiten und der begrenzten Kapazität von Cookies zu lösen (siehe Wichtige Punkte für die Verwendung von Cookies).

localStorage verfügt über die folgenden Funktionen

1.localStorage ist ein allgemeines Objekt und die Vorgänge für jedes Objekt sind anwendbar.

2. Der Attributwert des localStorage-Objekts kann nur eine Zeichenfolge sein.

Dies erfordert besondere Aufmerksamkeit. Wir möchten ein Objekt in localStorage speichern. Wie zum Beispiel

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]);
}

Natürlich können Sie das Objekt auch mit der JSON-Klasse in einen String konvertieren und speichern und dann den JSON-String beim Herausnehmen in ein wirklich verwendbares JSON-Objektformat konvertieren

3. Die von localStorage unterstützte Standardspeichergröße beträgt 5 MB, was von modernen Browsern gut unterstützt wird

Ausleihen des lokalen HTML5 LocalStorage-Speicherausschnitts von xiaowei0705

Script House erinnert alle daran, Folgendes zu beachten: Wenn Sie es auf einem Mobiltelefon verwenden, müssen Sie Speicherplatz im Hintergrund freigeben, um es zu unterstützen.

„QUOTA_EXCEEDED_ERR“ ist eine Ausnahme. Wenn die von Ihnen verwendete Speicherkapazität das Limit (5 MB) überschreitet, wird diese Ausnahme gemeldet

4.localStorage selbst hat Methoden

Schlüssel-Wert-Paar hinzufügen: localStorage.setItem(key,value)

Schlüsselwert abrufen: localStorage.getItem(key)

Schlüssel-Wert-Paare löschen: localStorage.removeItem(key).

Alle Schlüssel-Wert-Paare löschen: localStorage.clear().

Rufen Sie den Eigenschaftsnamen (Schlüsselnamen) von localStorage ab: localStorage.key(index).

Es gibt auch eine Eigenschaftslänge, die sich von gewöhnlichen Objekten unterscheidet:

Rufen Sie die Anzahl der in localStorage gespeicherten Schlüssel-Wert-Paare ab: localStorage.length.

Das folgende Beispiel wird verwendet, um das Schlüssel-Wert-Paar von localStorage
abzurufen

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

Basierend auf dem Prinzip des Vertrauens in native Methoden sollten für den Betrieb von localStorage so viele native Methoden wie möglich verwendet werden. Allerdings tritt manchmal ein seltsamer QUOTA_EXCEEDED_ERR-Fehler auf, wenn setItem() auf dem iPhone/iPad aufgerufen wird. Die Lösung besteht darin, „removeItem()“ vor „setItem“ zu verwenden. Aufgrund dieses Kompatibilitätsproblems scheint es also bequemer und kompatibler zu sein, Objekte zum Hinzufügen/Löschen von Schlüssel-Wert-Paaren zu verwenden.

5.localStorage-Ereignis

Das Speicherereignis von localStorage kann die Speicheraktion im Speicherereignishandler nicht abbrechen.

Das Speicherereignis ist lediglich eine Benachrichtigung, die der Browser Ihnen ausgibt, nachdem sich die localStorage-Daten geändert haben. Beachten Sie, dass hier die Bedingung ist, dass sich die Daten tatsächlich geändert haben. Mit anderen Worten: Wenn der aktuelle Speicherbereich leer ist, wird das Ereignis nicht ausgelöst, wenn Sie clear() erneut aufrufen. Oder wenn Sie setItem() verwenden, um einen Wert festzulegen, der mit dem vorhandenen Wert übereinstimmt, wird das Ereignis nicht ausgelöst. Es wird ausgelöst, wenn sich der Speicherbereich ändert. Dies enthält viele nützliche Eigenschaften:

•storageArea: Gibt den Speichertyp an (Sitzung oder Lokal)
•key: der Schlüssel des geänderten Elements
•oldValue: der ursprüngliche Wert des Schlüssels
•newValue: neuer Wert des Schlüssels
•URL*: URL, unter der die Schlüsseländerung erfolgt

Hinweis: Das URL-Attribut war in den frühen Spezifikationen das uri-Attribut. Einige Browser wurden früher veröffentlicht und enthielten diese Änderung nicht. Aus Kompatibilitätsgründen sollten Sie vor der Verwendung des URL-Attributs zunächst prüfen, ob es vorhanden ist. Wenn kein URL-Attribut vorhanden ist, sollten Sie das uri-Attribut
verwenden

PS: Speichern und Lesen sind in Firefox und Chrome normal, aber es scheint ein Problem mit dem Auslösen von Speicherereignissen zu geben. Chrome kann das Speicherereignis dieser Seite auslösen, indem die eigene Seite von Firefox das Fenster nicht auslöst Nach dem Ändern des Speicherereignisses, aber wenn gleichzeitig auf A.html und B.html zugegriffen wird, kann die Ausführung von setItem auf Seite A das Speicherereignis des Fensters auf Seite B auslösen. Ebenso kann die Ausführung von setItem auf Seite B das auslösen Speicherereignis des Fensters auf Seite A. In IE9 kann der Einstellungswert der Seite selbst das Speicherereignis der aktuellen Seite auslösen, und der Einstellungswert der aktuellen Seite kann auch das Speicherereignis anderer Seitenfenster unter derselben auslösen „Origin“. Dies scheint beispielsweise sinnvoller zu sein. Der erste Versuch von WebStorage-localstorage

Daher wird empfohlen, kompatible Verarbeitungsfunktionen für kompatible Browser zu schreiben oder das Speicherereignis einfach nicht zu verwenden.

Beispiel

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

Einige kleine Punkte:

Auf LocalStorage muss über einen Domänennamen zugegriffen werden, damit es funktioniert

Wenn die Methode clear() aufgerufen wird, werden key, oldValue und newValue alle auf null gesetzt.

LocalStorage wird auf die gleiche Weise verwendet

•localStorage – Datenspeicherung ohne zeitliche Begrenzung
•sessionStorage – Datenspeicher für eine Sitzung

localStorage bietet mehrere Methoden:

1. Speicher: localStorage.setItem(key, value)

Wenn der Schlüssel vorhanden ist, aktualisieren Sie den Wert

2. Holen Sie sich: localStorage.getItem(key)

Wenn der Schlüssel nicht existiert, geben Sie null zurück

3. Löschen: localStorage.removeItem(key)

Nach dem Löschen werden alle dem Schlüssel entsprechenden Daten gelöscht

4. Alles löschen: localStorage.clear()

Manchmal ist es zu mühsam, „removeItem“ zu verwenden, um sie einzeln zu löschen. Sie können „clear“ verwenden, um alle vom localStorage-Objekt gespeicherten Daten zu löschen

5. Durchlaufen Sie die in localStorage gespeicherten Schlüssel

.length Die Gesamtdatenmenge, zum Beispiel: localStorage.length

.key(index) ruft den Schlüssel ab, zum Beispiel: var key=localStorage.key(index);

6. Daten im JSON-Format speichern

JSON.stringify(data) Konvertiert ein Objekt in eine Datenzeichenfolge im JSON-Format und gibt die konvertierte Zeichenfolge zurück

JSON.parse(data) analysiert Daten in Objekte und gibt das analysierte Objekt zurück

Hinweis: Die in localStorage gespeicherten Daten können nicht von mehreren Browsern gemeinsam genutzt werden. Ein Browser kann nur die Daten seines eigenen Browsers lesen und der Speicherplatz beträgt 5 MB.