JavaScript verwendet localStorage zum Speichern von Daten

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript und stellt vor allem vor, wie JavaScript localStorage zum Speichern von Daten verwendet. Der Beispielcode im Artikel wird ausführlich vorgestellt und hat einen gewissen Referenzwert.

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Hintergrund

In der Vergangenheit verwendete js Session und Cookie zum Speichern von Informationen, Als ich damals immer noch meine Kollegen fragte, ob sie neue Lösungen hätten, erfuhr ich, dass es jetzt HTML5 localStorage lokalen Speicher gibt, der Daten auf der Browserseite speichern kann.

Ich erinnere mich an die ersten Cookies, die nur sehr kleine Dinge speichern konnten, etwa 4 KB, und die Sicherheit war sehr schlecht. In der IE6-Ära konnte ein Domainname natürlich nur zwanzig Cookies haben , IE hatte auch Das UserData-Zeug ist nutzlos. Flash verfügt außerdem über einen Speicher, der relativ groß ist und etwa 25-mal so viel Speicherplatz bietet wie Cookie. Damals wurde Flash ebenfalls aufgegeben.

In der H5-Ära sind sie vereint, LocalStorage dominiert die Welt. Die offizielle Empfehlung lautet, dass jede Website 5 MB sein sollte, was sehr groß ist. Obwohl die Browsereinstellungen variieren können, reicht es im Allgemeinen aus, etwas JSON oder Strings oder einen Cache zu speichern.

HTML5 LocalStorage lokaler Speicher

• Sitzungsspeicher: Die gespeicherten Daten werden für eine Sitzung des Browsers verwendet (normalerweise ist das Fenster geschlossen),
  
• localStorage: Die gespeicherten Daten bleiben lange bestehen. Beim nächsten Besuch der Website kann die Webseite die zuvor gespeicherten Daten direkt lesen. Bis auf die unterschiedlichen Aufbewahrungsfristen sind die Eigenschaften und Methoden der beiden Objekte exakt gleich.
  

Sie ähneln stark einer erweiterten Version des Cookie-Mechanismus, obwohl sie viel größeren Speicherplatz beanspruchen können. Sie unterliegen jedoch ebenso wie Cookies den gleichen Domain-Einschränkungen. Die auf einer bestimmten Webseite gespeicherten Daten können nur von Webseiten derselben Domain gelesen werden.

Indem Sie prüfen, ob das Fensterobjekt die Attribute sessionStorage und localStorage enthält, können Sie feststellen, ob der Browser diese beiden Objekte unterstützt. Die von

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

Storage-Operation

sessionStorage und localStorage gespeicherten Daten liegen alle in Form von "Schlüssel-Wert-Schlüssel-Wert-Paaren" vor. Mit anderen Worten: Jedes Datenelement hat einen Schlüsselnamen und einen entsprechenden Wert. Alle Daten werden im Textformat gespeichert.

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法，存储变量名为key，值为value的变量
var valueSession = sessionStorage.getItem("key");  // getItem方法，读取存储变量名为key的值
sessionStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
sessionStorage.clear();        // clear方法，清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value");     // 存储变量名为key，值为value的变量
localStorage.key = "value"        // 同setItem方法，存储数据
var valueLocal = localStorage.getItem("key");   // 读取存储变量名为key的值
var valueLocal = localStorage.key;      // 同getItem，读取数据
localStorage.removeItem('key');      // removeItem方法，删除变量名为key的存储变量
localStorage.clear();         // clear方法，清除所有保存的数据

// 利用length属性和key方法，遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue);      // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存转化好的的字符串

// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key");    // 取回 value 变量
jsonValue = JSON.parse(value);      // 把字符串转换成 JSON 对象

Speicherereignis

Wenn sich die gespeicherten Daten ändern, wird das Speicherereignis ausgelöst. Wir können eine Rückruffunktion für dieses Ereignis angeben.

window.addEventListener("storage",onStorageChange);

Die Callback-Funktion akzeptiert ein Ereignisobjekt als Parameter. Das Schlüsselattribut dieses Ereignisobjekts speichert den geänderten Schlüsselnamen.

function onStorageChange(e)
{
  console.log(e.key); 
}

Zusätzlich zum Schlüsselattribut verfügt das Ereignisobjekt über drei Attribute:

• oldValue: der Wert vor der Aktualisierung. Wenn der Schlüssel neu hinzugefügt wird, ist dieses Attribut null.
• newValue: aktualisierter Wert. Wenn der Schlüssel gelöscht wurde, ist diese Eigenschaft null.
• url: Die URL der Webseite, die ursprünglich das Speicherereignis ausgelöst hat.
  

Besondere Aufmerksamkeit ist, dass dieses Ereignis nicht auf der aktuellen Seite ausgelöst wird, wodurch sich die Daten ändern. Wenn der Browser mehrere Seiten unter einem Domänennamen gleichzeitig öffnet und eine der Seiten die Daten von sessionStorage oder localStorage ändert, werden die Speicherereignisse aller anderen Seiten ausgelöst, und das Speicherereignis wird nicht vom Original ausgelöst Seite. Durch diesen Mechanismus kann die Kommunikation zwischen mehreren Fenstern erreicht werden. Bei allen Browsern außer IE wird das Speicherereignis auf allen Seiten ausgelöst.

Wissen erweitern

1. localStorage und sessionStorage sind zwei Speichermethoden, die von IE7 und höher und den meisten Browsern unterstützt werden

2. Der Unterschied zwischen localStorage und sessionStorage:

(1 ), localStorage und sessionStorage sind beide Objekte, die zum Speichern temporärer Informationen auf dem Client verwendet werden.

(2). Sie können nur Objekte vom Typ String speichern (obwohl andere native Objekttypen in der Spezifikation gespeichert werden können, aber bisher hat kein Browser dies implementiert).

(3) Der Lebenszyklus von localStorage ist dauerhaft, was bedeutet, dass diese Informationen für immer bestehen bleiben, sofern der Benutzer die vom Browser bereitgestellten localStorage-Informationen nicht löscht. (im Speicher aufgezeichnet)

　Der SessionStorage-Lebenszyklus ist das aktuelle Fenster oder die aktuelle Registerkarte. Sobald das Fenster oder die Registerkarte geschlossen wird, werden alle über SessionStorage gespeicherten Daten gelöscht (Sitzungsspeicher).

(4) Verschiedene Browser können localStorage oder Informationen in SessionStorage nicht teilen. Verschiedene Seiten im selben Browser können denselben LocalStorage gemeinsam nutzen (die Seiten gehören zum selben Domänennamen und Port), SessionStorage-Informationen können jedoch nicht zwischen verschiedenen Seiten oder Registerkarten gemeinsam genutzt werden.

Hierbei ist zu beachten, dass sich Seiten und Registerkarten nur auf Fenster der obersten Ebene beziehen. Wenn eine Registerkarte mehrere Iframe-Tags enthält und diese zur selben Quellseite gehören, kann sessionStorage zwischen ihnen gemeinsam genutzt werden. (Prinzip des gleichen Ursprungs)

3. Die Größe der Daten, die von localStorage und sessionStorage gespeichert werden können, beträgt im Allgemeinen 5 MB

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Das obige ist der detaillierte Inhalt vonJavaScript verwendet localStorage zum Speichern von Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!