Beispiel für lokalen LocalStorage-Speicher in HTML5

1. Lokaler Speicher

Wenn eine Website vor der Geburt von HTML5 Daten auf der Browserseite speichern wollte, konnte sie dort nur Cookies verwenden Es gibt viele Möglichkeiten, Cookies zu verwenden.

Cookie-Probleme:

1. Die Cookie-Größe ist auf etwa 4 KB begrenzt (verschiedene Browser sind inkonsistent)

2. Cookies werden zusammen mit jeder HTTP-Anfrage gesendet (verursacht viele unnötige Cookies werden auch zusammen gesendet)

Lokaler Speicher:

1. Die Größe von localStorage ist auf 5 MB begrenzt (verschiedene Browser sind inkonsistent)

2. LocalStorage wird Nicht folgen HTTP-Anfragen werden zusammen gesendet

2. Lokaler Speicher auf Sitzungsebene-SitzungSpeicher

Sitzungsspeicher: Der Der Benutzer durchsucht eine bestimmte Website. Vom Zeitpunkt des Betretens der Website bis zum Schließen der Website ist dies die Gültigkeitsdauer des Sitzungsobjekts.

sessionStorage bietet vier Methoden zum Ausführen verwandter Vorgänge im lokalen Speicher.

　1. setItem( key, value)；Lokale Speicherdaten hinzufügen

　2.getItem( key); Holen Sie sich den entsprechenden Wert über den Schlüssel Wert

　3.removeItem(key)； Löschen entsprechenden Wert über Schlüssel

　4.clear() ;Clear alle lokalen (auf diesen Domainnamen beschränkten) Sitzungsdaten

 1 <script type="text/javascript"> 
 2     //添加key-value 数据到 sessionStorage 
 3     sessionStorage.setItem("name", "怜白"); 
 4     sessionStorage.setItem("job", "前端"); 
 5  
 6     //通过key来获取value 
 7     var name = sessionStorage.getItem("name"); 
 8  
 9     console.log(name); // 怜白
 10     console.log(sessionStorage.length); // 2
 11 
 12     // 通过key删除value
 13     sessionStorage.removeItem("job");
 14 
 15     console.log(sessionStorage.length); // 1
 16 
 17     //清空所有的key-value数据。
 18     sessionStorage.clear();
 19 
 20     console.log(sessionStorage.length); // 0
 21 </script>

3. Permanenter lokaler Speicher-localStorage

localStorage: verwendet Persistent lokal Bei der Speicherung verfallen die Daten niemals, es sei denn, die Daten werden aktiv gelöscht.

LocalStorage bietet vier Methoden zum Ausführen verwandter Vorgänge im lokalen Speicher.

　1. setItem( key, value)；Lokale Speicherdaten hinzufügen

　2.getItem( key); Rufen Sie den entsprechenden Wert über den Schlüssel ab Wert

　3.removeItem(key); Löschen Sie den entsprechenden Wertwert über key

　4.clear(; Alle lokalen Daten löschen

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("name", "怜白");
    localStorage.setItem("job", "前端");

    //通过key来获取value
    var name = localStorage.getItem("name");

    console.log(name); // 怜白
    console.log(localStorage.length); // 2

    // 通过key删除value
    localStorage.removeItem("job");

    console.log(localStorage.length); // 1

    //清空所有的key-value数据。
    localStorage.clear();

    console.log(localStorage.length); // 0
</script>

4. Zusammenfassung　

Der Unterschied zwischen localStorage und sessionStorage besteht darin, dass es sich bei dem einen um einen temporären Speicher und bei dem anderen um einen Langzeitspeicher handelt.

Möglicherweise haben Sie die folgende Schrift gesehen:

<script type="text/javascript">
    // 设置name
    localStorage.name = "怜白"

    // 删除name
    delete localStorage.name
</script>

Die obige Methode der direkten Zuweisung kann zwar die Funktion erfüllen, ist jedoch in der offiziellen Dokumentation als unsichere Methode definiert 🎜>Verwenden Sie also nicht diese Schreibweise, sondern die von localStorage bereitgestellte Methode.

Das obige ist der detaillierte Inhalt vonBeispiel für lokalen LocalStorage-Speicher in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!