Heim > Web-Frontend > H5-Tutorial > Web Storage – detaillierte Einführung in Web Storage

Web Storage – detaillierte Einführung in Web Storage

PHP中文网
Freigeben: 2017-06-20 13:55:49
Original
2184 Leute haben es durchsucht
  • 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>
      Nach dem Login kopieren

       

    • <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "张三""userName"</script>
      Nach dem Login kopieren

      >


    • <script type="text/javascript">window.onload =  (window.localStorage &&"userName", "hello,world!"</script>
      Nach dem Login kopieren

       


    • Erkennen Sie, ob der aktuelle Browser
    •     <script type="text/javascript">// 验证当前的浏览器是否支持localStorage和sessionStoragewindow.onload = function(){if (window.localStorage && window.sessionStorage) {alert("你的浏览器支持localStorage和sessionStorage");
                  }
              }</script>
      Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage