So verwenden Sie Localstorage

So verwenden Sie localstorage: 1. Daten aus localstorage abrufen; 4. localstorage löschen; 7. speichern und abrufen; komplexe Objekte. Detaillierte Einführung: 1. Speichern Sie Daten im lokalen Speicher, speichern Sie Daten im lokalen Speicher usw.

`localStorage` ist eine Web-API, die Daten im Client-Browser speichert. Es stellt ein einfaches Schlüsselwertspeichersystem bereit, mit dem Daten im Browser gespeichert werden können, sodass sie zwischen verschiedenen Seiten oder zwischen Browsersitzungen beibehalten werden können. Im Folgenden finden Sie die detaillierte Methode zur Verwendung von „localStorage“:

1. Speichern Sie Daten in „localStorage“

Um Daten in „localStorage“ zu speichern, müssen Sie die Methode „localStorage.setItem(key, value)“ verwenden , wobei „key“ der Schlüssel der zu speichernden Daten und „value“ der Wert der zu speichernden Daten ist. Zum Beispiel:

localStorage.setItem("username", "john_doe");

Dadurch wird der Benutzername „john_doe“ in „localStorage“ gespeichert und mit dem Schlüssel „Benutzername“ verknüpft.

2. Daten aus „localStorage“ abrufen:

Um Daten aus „localStorage“ abzurufen, können Sie die Methode „localStorage.getItem(key)“ verwenden, wobei „key“ der Schlüssel der abzurufenden Daten ist. Zum Beispiel:

const username = localStorage.getItem("username");
console.log(username); // 输出 "john_doe"

Dadurch werden die in „localStorage“ gespeicherten „Benutzernamen“-Daten abgerufen und der Variablen „Benutzername“ zugewiesen.

3. Gespeicherte Daten aktualisieren:

Wenn Sie gespeicherte Daten in „localStorage“ aktualisieren möchten, verwenden Sie einfach die Methode „setItem()“ und geben Sie einen neuen Wert für denselben Schlüssel an. Der alte Wert wird durch den neuen Wert ersetzt. Zum Beispiel:

localStorage.setItem("username", "jane_doe");

Dadurch wird der zuvor gespeicherte „john_doe“ durch den neuen Wert „jane_doe“ ersetzt.

4. Daten löschen:

Um Daten aus „localStorage“ zu löschen, können Sie die Methode „localStorage.removeItem(key)“ verwenden, wobei „key“ der Schlüssel der zu löschenden Daten ist. Zum Beispiel:

localStorage.removeItem("username");

Dadurch werden die in „localStorage“ gespeicherten „Benutzernamen“-Daten gelöscht.

5. „localStorage“ löschen:

Wenn Sie alle in „localStorage“ gespeicherten Daten auf einmal löschen müssen, können Sie die Methode „localStorage.clear()“ verwenden. Dadurch wird der gesamte „localStorage“ gelöscht. Beispiel:

localStorage.clear();

6. Überprüfen Sie, ob „localStorage“ verfügbar ist:

Bevor Sie „localStorage“ verwenden, prüfen Sie am besten, ob der Browser dies unterstützt, da der Browser in einigen Fällen möglicherweise den Zugriff auf „localStorage“ deaktiviert hat . Mit dem folgenden Code können Sie überprüfen, ob „localStorage“ verfügbar ist:

if (typeof Storage !== "undefined") {
  // 支持 localStorage
  // 在这里使用 localStorage 的操作
} else {
  // 不支持 localStorage
  console.log("对不起，您的浏览器不支持 localStorage。");
}

7. Komplexe Objekte speichern und abrufen:

„localStorage“ kann nur Zeichenfolgen speichern, wenn Sie also komplexe Objekte (z. B. JavaScript-Objekte) speichern und abrufen möchten oder Arrays) müssen sie beim Speichern und Abrufen zunächst in Zeichenfolgen serialisiert und dann deserialisiert werden. Normalerweise wird die Methode „JSON.stringify()“ für die Serialisierung und die Methode „JSON.parse()“ für die Deserialisierung verwendet.

Zum Beispiel das Speichern eines JavaScript-Objekts mit mehreren Eigenschaften:

const user = {
  username: "jane_doe",
  email: "jane@example.com"
};
localStorage.setItem("user", JSON.stringify(user));
然后，当你需要检索它时，将其从字符串反序列化回对象：
const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.username); // 输出 "jane_doe"

Hinweise und Einschränkungen:

Obwohl „localStorage“ eine praktische clientseitige Speicherlösung ist, gibt es einige Einschränkungen und Überlegungen:

-Kapazitätsbegrenzung: Die Speicherkapazität von „localStorage“ unter jedem Domainnamen beträgt normalerweise etwa 5 MB, und es kann je nach Browser einige Unterschiede geben. Wenn diese Kapazitätsgrenze überschritten wird, fordert der Browser den Benutzer möglicherweise auf, den Speicher zu löschen oder „localStorage“ zu deaktivieren.

-Gleiche Ursprungsrichtlinie: „localStorage“ folgt der gleichen Ursprungsrichtlinie, was bedeutet, dass nur Seiten unter demselben Domänennamen auf dieselben „localStorage“-Daten zugreifen können. Seiten mit unterschiedlichen Domainnamen können „localStorage“ nicht gemeinsam nutzen.

-Datentypbeschränkung: „localStorage“ kann nur Zeichenfolgen speichern, daher müssen Nicht-String-Daten (wie Objekte, Arrays usw.) zur Speicherung in Zeichenfolgen serialisiert und dann beim Abrufen deserialisiert werden.

– Datenschutz und Sicherheit: Da „localStorage“ im Client-Browser gespeichert wird, eignet es sich nicht zum Speichern sensibler Informationen wie Passwörter oder Token. Sensible Informationen sollten serverseitig gespeichert und über sichere Kommunikationsprotokolle übertragen werden.

– Datenpersistenz: Die Daten werden clientseitig gespeichert. Selbst wenn der Benutzer den Browser schließt oder den Computer neu startet, bleiben die Daten also erhalten, bis sie explizit gelöscht werden. Damit lassen sich persistente Einstellungen oder lokale Caches erstellen.

Im Allgemeinen ist „localStorage“ ein einfaches und leistungsstarkes clientseitiges Speichertool, das zum Speichern kleiner Daten, Benutzereinstellungen, lokalem Cache und anderen Szenarien geeignet ist. Beachten Sie bei der Verwendung jedoch die Kapazitätsbeschränkungen und Sicherheitsprobleme sowie die Serialisierungs- und Deserialisierungsanforderungen. Wenn Sie eine erweiterte clientseitige Speicherlösung benötigen, können Sie auch die Verwendung von Technologien wie IndexedDB oder Web SQL in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Localstorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!