Heim > Artikel > Web-Frontend > Web Storage – detaillierte Einführung in Web Storage
Webspeicherklassifizierung
Client und Server
Web verstehen Speicherung
Mit der Entwicklung von Webanwendungen gibt es immer mehr Einsatzmöglichkeiten für clientseitige Speicherung, aber auch die Möglichkeiten, clientseitige Speicherung zu implementieren, werden immer vielfältiger vielfältig. Der einfachste und kompatibelste Weg sind Cookies, allerdings hat die Speicherung von Cookies als echter Client noch viele Nachteile. Gleichzeitig verfügen verschiedene Browser auch über eigene Speichermethoden. Beispielsweise kann userData Behavior in IE6 und höher verwendet werden, globalStorage kann in Firefox verwendet werden und Flash Local Storage kann auch in Flash-Plug-Ins verwendet werden. Diese Methoden haben jedoch Nachteile in Bezug auf Kompatibilität und andere Aspekte sowie auf der Clientseite Lagerung gehört nicht zum Besten Weg.
Aufgrund der oben genannten Situation wurden in HTML5 mehrere neue Speichermethoden hinzugefügt. Webdatenbank und Webspeicher.
Der Unterschied zwischen verschiedenen Speichermethoden
Webspeicher verstehen
Vorteile
Nachteile
localStorage
sessionStorage
Browser-Unterstützung
Dies ist eine neue Möglichkeit für den Client, Daten in HTML5 zu speichern. Es bietet eine einfach zu bedienende API und muss nur den Schlüsselwert festlegen. Die Größe der unter jeder Benutzerdomäne gespeicherten Daten beträgt 5 bis 10 Millionen. Enthält unten sessionStorage und localStorage. Gleichzeitig umfasst es auch eine Webdatenbank.
Die gespeicherte Datengröße ist größer.
Die gespeicherten Daten werden auf der Clientseite gespeichert und müssen nicht mit dem Browser kommunizieren, was unseren Bandbreitenverbrauch reduzieren kann.
bietet eine umfangreiche und benutzerfreundliche API, die Entwicklern die Entwicklung erleichtert.
Unabhängigen Speicherplatz nutzen. Unter jeder Domäne gibt es einen unabhängigen Speicherplatz, und jeder Bereich ist völlig unabhängig, wodurch Datenverwechslungen vermieden werden können (dies unterscheidet sich eigentlich nicht wesentlich von Cookies).
Da die in jeder Domäne gespeicherten Daten ein unabhängiger Bereich sind, können wir keine Daten in anderen Domänen unter einer Domäne verwenden.
Da die gespeicherten Daten immer ohne unsere aktive Löschung gespeichert werden und die Daten nicht verschlüsselt sind, kann es leicht zu Datendiebstahl kommen.
LocalStorage ist eine Speichermethode ohne zeitliche Begrenzung, sofern wir die Daten nicht aktiv selbst löschen.
sessionStorage ist eine Speichermethode für Sitzungen. Wenn unser Browser oder unser Betriebsfenster geschlossen wird, gehen die in sessionStorage gespeicherten Daten verloren. Es kann nur auf Seiten in derselben Sitzung zur gleichen Zeit verwendet werden.
IE8.0 oder höher, Firefox3.0 oder höher, Opera10.5 oder höher, Chrome3.0 oder höher, Safari4.0 oder höher.
Wie Cookies funktionieren
Vorteile
Nachteile
Als clientseitige Speichermethode nutzen Cookies hauptsächlich Textspeicher. Wenn eine Anwendung Cookies verwendet, sendet der Server das Cookie an den Client und der Client speichert es. Beim nächsten Besuch des Benutzers wird das auf dem Client gespeicherte Cookie an den Server gesendet. In der Entwicklung wird der typischste Fall zum Speichern von Benutzerinformationen verwendet.
Einfach und bequem
Der Browser ist für das Versenden von Daten verantwortlich
Der Browser verwaltet verschiedene Websites an sich Daten sind nicht anfällig für Datenverwechslungen
Wie oben erwähnt, besteht das Funktionsprinzip von Cookies darin, dass wir von Server zu Client und von Client zu Server kommunizieren. Dies verursacht unnötigen Bandbreitenverbrauch und beeinträchtigt auch die Ladegeschwindigkeit der Seite, was zu einer schlechten Benutzererfahrung führt.
Größenbeschränkung der gespeicherten Daten, Cookie kann nur 4 KB Daten speichern.
Sicherheit. Cookie-Daten werden auf dem Client in Textform gespeichert, was eine sehr geringe Sicherheit aufweist und leicht zum Diebstahl von Daten führen kann.
Mengenbegrenzung. Die Anzahl der Cookies, die die meisten Browser speichern können, beträgt 30–50, und einige Browser unterstützen 300, während IE6 nur 20 unterstützt.
Datenintegrität. Wenn unser Client auf die höchste Sicherheitsstufe eingestellt ist, verfallen unsere Cookies.
Vor- und Nachteile von Cookies
Vor- und Nachteile von Webspeicher
Beispielcode
Hinweis: localStorage und sessionStorage speichern beide String-Objekte.
Erstellen
Speicher abrufen
Speicher löschen
<script type="text/javascript">// 创建均使用localStorage做示例,sessionStorage语法方式和localStorage是一样的,localStorage(key, value);或者localStorage.key = "value";window.onload = function(){if (window.localStorage) { localStorage.setItem("userName", "张三");} }</script>
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "张三""userName"</script>
>
<script type="text/javascript">window.onload = (window.localStorage &&"userName", "hello,world!"</script>
<script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage"); } }</script>
Das obige ist der detaillierte Inhalt vonWeb Storage – detaillierte Einführung in Web Storage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!