Eine kurze Einführung in HTML5-Web Storage APIs

1. Übersicht
Web Storage ist eine Methode zur Speicherung von Daten auf der Clientseite. Im Vergleich zu Cookie ist Web Storage sicherer und kann mehr Objekte speichern, nicht nur Strings; Anstelle von Cookies, die nur wenige KB Daten speichern können, kann Web Storage auch die Datenkonvertierung zwischen dem Client und dem Server reduzieren und so die Bandbreite reduzieren.
Der Kern von Web Storage sind sessionStorage und localStorage, zwei Unterobjekte des Fensterobjekts. Daten werden in Form von Schlüssel-Wert-Paaren über diese beiden Objekte gespeichert. Beide Objekte implementieren die SpeicherSchnittstelle, haben Eigenschaften und Methoden mit den gleichen Namen und haben die gleiche Verwendung. Der Unterschied besteht in der Speicherzeit und dem gemeinsamen Umfang der beiden.
Die Speicherzeit von sessionStorage-Daten hängt von der Existenzzeit des Browserfensters oder Tabs ab, in dem sie gespeichert werden, und der Freigabebereich liegt nur innerhalb des Browserfensters oder Tabs, in dem sie generiert wurden.
Die Speicherzeit von localStorage-Daten überschreitet die Öffnungszeit des Browsers, sofern sie nicht manuell oder durch Code gelöscht werden. Der Umfang der gemeinsamen Nutzung liegt zwischen Seiten derselben Ursprungswebsite.
Viele Browser unterstützen den SessionStorage-Zugriff auf das lokale Dateisystem nicht, daher muss er über den Webserver verwendet werden.
Die Spezifikation von Web Storage erlaubt die Speicherung jeder Art von Daten, aber in jeder Browser-Implementierung erlauben die meisten Werte die Speicherung von String-Textdaten, Sie können Web Storage jedoch in Kombination mit JSON verwenden Technologie zum Speichern von Nicht-Text-Daten.
Eine fortschrittlichere Datenspeichermethode ist Web SQL Database für die Datenbankspeicherung, die auf Index basiert und über die SQL-Abfragesprache SQLite verfügt. Web SQL-Datenbank wird derzeit nur von Safari, Chrome und Opera unterstützt. Die endgültige Spezifikation wird diesen Ansatz höchstwahrscheinlich nicht verfolgen. Eine weitere Methode ist IndexedDB, die nur von FireFox 4 oder höher unterstützt wird.

2. Browser-Unterstützungserkennung

 function checkStorageSupport() { 
  //sessionStorage 
  
if
 (window.sessionStorage) { 
    alert('This browser supports sessionStorage'); 
  } 
else
 { 
    alert('This browser does NOT support sessionStorage'); 
  } 
  //localStorage 
  if (window.localStorage) { 
    alert('This browser supports localStorage'); 
  } else { 
    alert('This browser does NOT support localStorage'); 
  } 
}

3.Speicherschnittstelle

  interface Storage { 
     //同源键值对的数目
     readonly attribute unsigned long length; 
     //通过索引获取键，索引从0开始
     getter DOM
String
 
key
(in unsigned long index); 
     //通过键获取值，键若不存在，值将返回
null
     getter any getItem(in DOMString key); 
     //存储键值对，若已存在同名键，则值将被覆盖。若用户关闭了浏览器存储或是已超     //过允许存储的最大值，都将产生QUOTA_EXCEEDED_ERR错误。
     
set
ter creator void setItem(in DOMString key, in any data); 
     //通过键删除值，不存在则什么也不做
     
delete
r void removeItem(in DOMString key); 
     //删除storage中所有键值对，若为空则什么也不做
     void 
clear
(); 
   };

4. Lesen und Speichern von Daten

  //---------------方式一--------------
   //存储数据
   window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’); 
   //读取数据
   alert(window.sessionStorage.getItem(‘myFirstKey’)); 
   //---------------方式二--------------
   //存储数据
   window.sessionStorage.myFirstKey = ‘myFirstValue’;
   //读取数据
   alert(window.sessionStorage.myFirstKey); 
   //---------------方式三--------------
   var varKey = sessionStorage.key(index);
   window.sessionStorage[varKey] = 
new
Value;

5. Speicher--Ereignisse
Die Kommunikation zwischen Web-Speicher und anderen Seiten, Browserfenstern oder -registerkarten und Web-Workern kann über Speicherereignisse erfolgen, um fortzufahren . Objekte desselben Ursprungs können auf Speicherereignisse lauschen. Fügen Sie die Speicherereignis-Überwachungsmethode wie folgt hinzu:

  window.addEventListener("storage", displayStorageEvent, true);

6. StorageEvent-Schnittstelle
Das Speicherereignisobjekt implementiert die StorageEvent-Schnittstelle wie folgt:

 interface StorageEvent : Event { 
      readonly attribute DOMString key; 
      readonly attribute any oldValue; 
      readonly attribute any newValue; 
      readonly attribute DOMString url; 
      //该方法提供了一个对发生storage事件对象的
引用
，这个对象可以是
      //sessionStorage或localStorage
      readonly attribute Storage storageArea;
   };

6. Behandeln Sie das maximale Kontingent
Die meisten Browser erlauben, dass der Webspeicher 5 MB nicht überschreitet. Um zu verhindern, dass das Kontingent beim Speichern von Daten überschritten wird, können Sie die Methode zum Abfangen von QUOTA_EXCEEDED_ERR verwenden Ausnahme, um damit umzugehen, zum Beispiel:

try
   {
      sessionStorage["name"] = "Tabatha";
   }
   catch (
exception
)
   {
      if (exception == QUOTA_EXCEEDED_ERR)
      { 
         // we should tell the user their quota has been exceeded. 
      }
   }

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in HTML5-Web Storage APIs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!