HTML5 -Handbuch - 5. Verwenden Sie den Webspeicher, um die Daten von Schlüsselwertpaaren zu speichern

Autor：Eve Cole Aktualisierungszeit：2025-04-11 13:00:04

Der Inhalt dieser Lektion besteht darin, Webspeicher einzuführen, in dem die Daten von Schlüsselwertpaaren im Browser gespeichert werden. Es ist funktional wie die vorherigen Cookies, aber es ist besser und die gespeicherten Daten können größer sein. Es gibt zwei Arten des Webspeichers: lokaler Speicher- und Sitzungsspeicher, die denselben Implementierungsmechanismus verwenden, außer dass die Sichtbarkeit und der Lebenszyklus unterschiedlich sind.

1. Verwenden Sie den lokalen Speicher

Wir verwenden das LocalStorage-Objekt, um auf den lokalen Speicher zuzugreifen, der das Speicherobjekt zurückgibt, mit dem die Daten von Schlüsselwertpaaren gespeichert werden. Es hat die folgenden Eigenschaften und Methoden:

Clear (): Speichern Sie das Schlüsselwertpaardaten eindeutig;

getItem (<Key>): Wert durch Schlüssel;

Key (<Index>): den Schlüsselwert über den Index abrufen;

Länge: Gibt die Anzahl der Schlüsselwertpaare zurück;

removeItem (<Key>): Entfernen Sie die angegebenen Daten über Taste.

setItem (<Key>, <wert>): Fügen Sie ein Schlüsselwertpaar hinzu. Wenn das Schlüsselwertpaar des angegebenen Schlüssels vorhanden ist, wird die Aktualisierungsoperation implementiert.

[<Key>]: Verwenden Sie den Schlüssel, um den angegebenen Wert über Array -Index zu erhalten.

Mit dem Speicherobjekt können wir Schlüsselwertpaardaten in Form von Zeichenfolgen speichern. Der Schlüssel ist eindeutig, was bedeutet, dass bei Verwendung der SetItem-Methode die Tastenwertpaare, wenn der Schlüsselwert bereits vorhanden ist, der Aktualisierungsvorgang implementiert wird. Schauen wir uns das folgende Beispiel an:

<! DocType html>

<html>

<kopf>

<title> Beispiel </title>

Body> *{float: links;}

Tabelle {Border-Collapse: Kollaps; Rand-Links: 50px;}

th, td {padding: 4px;}

th {text-align: rechts;}

Eingabe {Rand: dünn solide Schwarz; Polsterung: 2px;}

Label {Min-Width: 50px; Anzeige: Inline-Block; Text-Align: Right;}

#Countmsg, #buttons {Margin-Links: 50px; Margin-Top: 5px; Margin-Bottom: 5px;}

</style>

</head>

<body>

<div>

<Label> Schlüssel: </label> <Eingabe id = "Schlüssel" placeholder = "Key eingeben"/> </div>

<div>

<button id = "löschen"> löschen </button>

</div>

<p id = "countmsg"> Es gibt <span id = "count"> </span> Elemente </p>

</div>

<tr>

<Th> Artikelanzahl: </th>

</tr>

</table>

displayData ();

var buttons = document.getElementsByTagName ('Schaltfläche');

für (var i = 0; i <buttons.length; i ++) {

Buttons [i] .onclick = handbuttonpress;

}

Funktionshandbuttonpress (e) {

Switch (e.target.id) {

Fall 'Add':

var key = document.getElementById ('Schlüssel'). Wert;

var value = document.getElementById ('Wert'). Wert;

LocalStorage.SetItem (Schlüssel, Wert);

brechen;

Fall 'klar':

LocalStorage.Clear ();

brechen;

}

displayData ();

}

Funktion displayData () {

var tableElement = document.getElementById ('Daten');

tableElement.innerhtml = '';

var itemCount = localStorage.length;

document.getElementById ('count'). innerhtml = itemCount;

für (var i = 0; i <itemCount; i ++) {

var key = localStorage.Key (i);

var val = localStorage.getItem (Schlüssel);

tableElement.innerHtml + = '<tr> <th>' + Taste + ': </th> <td>' + Val + '</td> </tr>';

}

</script>

</body>

</html>

Schauen wir uns die laufenden Ergebnisse an :

Der Browser kann die Daten nur löschen, die wir über LocalStorage erstellt haben, es sei denn, der Benutzer löscht sie.

2. Hören Sie sich Speichereignisse an

Die durch den lokalen Speicher gespeicherten Daten sind im gleichorientierten Dokument sichtbar. Wenn Sie beispielsweise zwei Chrom -Browser öffnen, um auf die gleiche URL -Adresse zuzugreifen, ist der lokale Speicher auf einer beliebigen Seite auch auf der anderen Seite sichtbar. Wenn Sie jedoch dieselbe URL -Adresse mit einem anderen Browser (wie Firefox) öffnen, ist die lokale Speicherung unsichtbar, da sie unterschiedliche Quellen haben. Das Speichereignis wird verwendet, um die Änderungen im Speicherinhalt anzuhören. Mal sehen, welche Eigenschaften es enthält:

Schlüssel: Gibt den geänderten Schlüsselwert zurück;

OldValue: Gibt den Wert vor der Änderung des Schlüsselwerts zurück;

NewValue: Gibt den neuen Wertwert zurück, dessen Schlüsselwert geändert hat.

URL: Die URL -Adresse, die sich geändert hat;

Storagearea: Gibt das geänderte Speicherobjekt (lokaler Speicher oder Sitzungsspeicher) zurück.

Schauen wir uns ein Beispiel unten an:

<! DocType html>

<html>

<kopf>

<title> Storage </title>

Tabelle {Border-Collapse: Zusammenbruch;}

th, td {padding: 4px;}

</style>

</head>

<body>

<tr>

<Th> Schlüssel </th>

<Th> OldValue </th>

<Th> NewValue </th>

<Th> storagearea </th>

</tr>

</table>

var tableElement = document.getElementById ('Daten');

window.onstorage = function (e) {

var row = '<tr>';

Zeile + = '<td>' + E.Key + '</td>';

Zeile + = '<td>' + e.olevalue + '</td>';

Zeile + = '<td>' + e.NewValue + '</td>';

Zeile + = '<td>' + e.url + '</td>';

Zeile + = '<td>' + (e.Storagearea == localStorage) + '</td> </tr>';

tableElement.innerhtml += row;

}

</script>

</body>

</html>

In Beispiel 1 addieren, löschen und ändern wir die Speicherdaten und werden auf der Seite von Beispiel 2 angezeigt. Beispiel 2 läuft normalerweise im Chrombrowser, Firefox reagiert nicht und andere Browser testen es nicht.

Auslaufergebnisse :

3. Verwenden Sie Sitzungsspeicher

Der Sitzungsspeicher entspricht der Verwendung lokaler Speicher, außer dass seine Zugänglichkeit auf die aktuelle Seite beschränkt ist und nach Abschluss der Seite verschwindet. Wir greifen über SessionStorage darauf zu.

<! DocType html>

<html>

<kopf>

<title> Beispiel </title>

Body> *{float: links;}

Tabelle {Border-Collapse: Kollaps; Rand-Links: 50px;}

th, td {padding: 4px;}

th {text-align: rechts;}

Eingabe {Rand: dünn solide Schwarz; Polsterung: 2px;}

Label {Min-Width: 50px; Anzeige: Inline-Block; Text-Align: Right;}

#Countmsg, #buttons {Margin-Links: 50px; Margin-Top: 5px; Margin-Bottom: 5px;}

</style>

</head>

<body>

<div>

<Label> Schlüssel: </label> <Eingabe id = "Schlüssel" placeholder = "Key eingeben"/> </div>

<div>

<button id = "löschen"> löschen </button>

</div>

<p id = "countmsg"> Es gibt <span id = "count"> </span> Elemente </p>

</div>

<tr>

<Th> Artikelanzahl: </th>

</tr>

</table>

displayData ();

var buttons = document.getElementsByTagName ("Schaltfläche");

für (var i = 0; i <buttons.length; i ++) {

Buttons [i] .onclick = handbuttonpress;

}

Funktionshandbuttonpress (e) {

Switch (e.target.id) {

Fall 'Add':

var key = document.getElementById ("Schlüssel"). Wert;

var value = document.getElementById ("Wert"). Wert;

SessionStorage.SetItem (Schlüssel, Wert);

brechen;

Fall 'klar':

SessionStorage.Clear ();

brechen;

}

displayData ();

}

Funktion displayData () {

var tableElement = document.getElementById ('Daten');

tableElement.innerhtml = '';

var itemCount = SessionStorage.length;

document.getElementById ('count'). innerhtml = itemCount;

für (var i = 0; i <itemCount; i ++) {

var key = SessionStorage.Key (i);

var val = sessionStorage.getItem (Schlüssel);

tableElement.innerHtml + = "<tr> <th>" + Taste + ": </th> <td>" + val + "</td> </tr>";

}

</script>

</body>

</html>

Laufeffekt :

Wenn Sie in Beispiel 3 Änderungen vornehmen, ändert sich die Seite in Beispiel 2 nicht.

Zusammenfassen :

SessionStorage wird verwendet, um Daten in einer Sitzung lokal zu speichern, auf die nur auf den Seiten derselben Sitzung zugegriffen werden kann, und die Daten werden nach Abschluss der Sitzung zerstört. SessionStorage ist daher kein anhaltender lokaler Speicher, sondern nur ein Speicher auf Sitzungsebene.

LocalStorage wird für den anhaltenden lokalen Speicher verwendet, und die Daten werden niemals verfallen, es sei denn, sie werden aktiv gelöscht.

Der Unterschied zwischen Webspeicher und Cookies: Das Konzept des Webspeichers ähnelt Cookies. Der Unterschied besteht darin, dass es für den Speicher größerer Kapazität ausgelegt ist. Die Größe des Keks ist begrenzt, und jedes Mal, wenn Sie eine neue Seite anfordern, wird das Cookie übersendet, die unsichtbare Bandbreite verschwendet. Darüber hinaus muss der Cookie angegeben werden und kann nicht über Domänen hinweg aufgerufen werden. Darüber hinaus verfügt der Webspeicher von SetItem, GetItem, RemoveItem, Clear und anderen Methoden. Im Gegensatz zu Cookies müssen Front-End-Entwickler SetCookies und Getcookies selbst zusammenfassen. Außerdem verfügt jede Domäne (einschließlich Subdomain) des Webspeichers über einen unabhängigen Speicherplatz, und jeder Speicherplatz ist völlig unabhängig, sodass sie keine Datenverwirrung verursachen.

Cookies sind jedoch auch unverzichtbar: Die Funktion von Cookies besteht darin, mit dem Server zu interagieren und als Teil der HTTP -Spezifikation vorhanden zu sein, während der Webspeicher nur so erstellt wird, dass Daten lokal gespeichert werden.

Quellcode herunterladen