Was ist der Unterschied zwischen sessionStorage und localStorage?-PHP-Tutorial-php.cn

Was ist der Unterschied zwischen sessionStorage und localStorage?

一个新手

Freigeben： 2023-03-15 19:30:01

Original

21059 Leute haben es durchsucht

Der Unterschied zwischen sessionStorage und localStorage ist: 1. localStorage hat keine Ablaufzeit. 2. sessionStorage speichert Daten für eine Sitzung und der Lebenszyklus ist derselbe wie die Sitzung Daten werden gelöscht.

Was ist der Unterschied zwischen sessionStorage und localStorage?

Der Unterschied zwischen sessionStorage und localStorage

Wie wir alle wissen, seit der Entstehung des HTML 5-Standards wurde „Lokalisierter Speicher“ einst zu einem heiß gesuchten Schlüsselwort. Zu Beginn von HTML 5 gab es zwei Arten der lokalen Speicherung: eine war Web-Speicher und die andere war Web-SQL. Da die Implementierung von Web-SQL auf SQLite basiert, tendiert sie eher zur Richtung von DataBase, und W3C gab im November 2011 offiziell bekannt, dass es die Web-SQL-Spezifikation nicht mehr beibehalten wird, sodass seine API-Schnittstelle derzeit nicht in den Geltungsbereich fällt von HTML 5. Daher bezieht sich der lokale HTML 5-Speicher, über den wir häufig sprechen, derzeit hauptsächlich auf Webspeicher.

Im Folgenden finden Sie eine detaillierte Beschreibung und Erläuterung von WebStorage und seinen beiden Formen.

1. webStorage

webStorage ist eine wichtige Funktion, die häufig im Front-End-Entwicklungsprozess verwendet wird Auf dem Client lokal gespeicherte Daten ähneln Cookies, ihre Funktion ist jedoch viel leistungsfähiger als die von Cookies. Die Größe des Cookies beträgt nur etwa 4 KB (verschiedene Browser haben unterschiedliche Größen), während die Größe von webStorage 5 MB beträgt. Die von der API bereitgestellten Methoden lauten wie folgt:

setItem(key, value) – Daten speichern und Informationen in Form von Schlüssel-Wert-Paaren speichern.

getItem(key) – Rufen Sie Daten ab und übergeben Sie den Schlüsselwert, um den entsprechenden Wert zu erhalten.

removeItem(key) – einzelne Daten löschen und die entsprechenden Informationen basierend auf dem Schlüsselwert entfernen.

clear() – Alle Daten löschen

key(index) – – Den Schlüssel eines Index abrufen

2. localStorage

Der Lebenszyklus von localStorage ist dauerhaft. Wenn Sie localStorage zum Speichern von Daten verwenden, verschwinden die Daten nicht, es sei denn, Sie löschen sie aktiv. Die verwendete Methode ist wie oben gezeigt. localStorage verfügt über ein Längenattribut. Sie können überprüfen, wie viele Datensätze es enthält. Die Verwendung ist wie folgt:

     var storage = null;
         if(window.localStorage){              //判断浏览器是否支持localStorage
            storage = window.localStorage;     
            storage.setItem("name", "Rick");    //调用setItem方法，存储数据
            alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
            storage.removeItem("name");     //调用removeItem方法，移除数据
            alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null
 
         }

Nach dem Login kopieren

localStorage ist einfacher als sessionStorage und es gibt nicht viele Dinge, auf die man achten muss.

3. sessionStorage

Der Lebenszyklus von sessionStorage liegt vor dem Schließen des Browsers. Mit anderen Worten: Die Daten bleiben immer bestehen, bis der gesamte Browser geschlossen wird. sessionStorage verfügt auch über ein Längenattribut, dessen grundlegende Beurteilung und Verwendung mit denen von localStorage identisch sind. Die folgenden Punkte müssen beachtet werden:

<1> Durch die Seitenaktualisierung werden die Daten nicht gelöscht

Zur Überprüfung habe ich zwei HTML-Dateien vorbereitet, eine davon ist index . html und das andere ist text.html. Der Ursprung von text.html wird später ausführlich besprochen. Die HTML-Codes der beiden lauten wie folgt:

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            function submit() {
                var str = document.getElementById("text").value.trim();
                setInfo(str);
                document.getElementById("text").value = "";
            }
            //储存数据
            function setInfo(name) {
                var storage = window.sessionStorage;
                storage.setItem(&#39;name&#39;, name);
            }
            //显示数据
            function shows() {
               var storage = window.sessionStorage;
               var str = "your name is " + storage.getItem("name");
               document.getElementById("text").value = str;
            }
         </script>
    </head>
    <body>
         <input type="button" value="Login" οnclick="submit()" />
         <input type="text" name="text" id="text" />
         <input type="button" value="show" οnclick="shows()" />
         <a href="text.html" target="_blank">点击打开</a>
    </body>
    </html>

Nach dem Login kopieren

Die text.html-Seite lautet wie folgt:

     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="UTF-8">
         <title>Title</title>
     </head>
     <body>
         <script>
             var storage = window.sessionStorage;
             alert(storage.getItem("name"));
         </script>
     </body>
     </html>

Nach dem Login kopieren

Das Ergebnis des Öffnens Die Seite index.html lautet wie folgt:

Was ist der Unterschied zwischen sessionStorage und localStorage?

Wenn Sie auf die Schaltfläche „Anzeigen“ klicken, wird im Eingabefeld „Ihr Name ist null“ angezeigt Keine Daten mit dem Schlüsselwert „name“ im sessionStorage gespeichert. Nachdem Sie „Rick“ in den Text eingegeben haben, klicken Sie auf die Schaltfläche „Anmelden“. Wenn das Eingabefeld geleert ist, wurden die Daten in sessionStorage gespeichert. Anschließend wird „Dein Name ist Rick“ angezeigt. Klicken Sie zu diesem Zeitpunkt auf den Browser, um die Webseite zu aktualisieren, und klicken Sie dann auf die Schaltfläche „Anzeigen“. Im Eingabefeld wird weiterhin „Ihr Name ist Rick“ angezeigt.

Seite kann auf SessionStorage-Daten zugreifen.

Erinnern Sie sich an die von Ihnen vorbereitete text.html-Seite? Jetzt ist sie an der Reihe. Zur Überprüfung führen wir die oben genannten Schritte aus und öffnen text.html. Das Ergebnis lautet wie folgt:

Was ist der Unterschied zwischen sessionStorage und localStorage?

Wie Sie sehen können, ist dieser Wert null und der Wert von „Name“ kann nicht abgerufen werden. Schließen Sie nun diese text.html-Seite und öffnen Sie den Link, indem Sie auf die index.html-Seite klicken. Sie können die folgenden Ergebnisse sehen:

Was ist der Unterschied zwischen sessionStorage und localStorage?

Daher können Sie das unter erfahren die aktuelle Uhrzeit Der auf der Seite geöffnete Link kann auf die Daten in sessionStorage zugreifen. Später, nach einigen anderen Tests, stellte ich fest, dass nach dem Öffnen der text.html-Seite aus index.html, dem Schließen von index.html und dem Aktualisieren von text.html auch auf die Daten in sessionStorage zugegriffen werden kann. Die Daten im sessionStorage können nur gelöscht werden, wenn index.html und alle daraus geöffneten Seiten geschlossen werden oder der Browser direkt geschlossen wird.

Mit window.open die Seite öffnen und die Methode localtion.href ändern, können die Daten innerhalb von sessionStorage abgerufen werden

Die beiden oben genannten Methoden nach dem Testen , Und das ist es tatsächlich. Interessierte Studierende können die Ergebnisse direkt testen. Ich werde die Unterschiede zwischen localStorage und sessionStorage nicht zusammenfassen.

Kurz gesagt: Achten Sie bei der Verwendung auf die oben genannten Punkte, und Sie können viele unnötige Fallstricke bei der Verwendung vermeiden.

Weitere Informationen zu diesem Thema finden Sie auf der PHP-Website für Chinesisch! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen sessionStorage und localStorage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!