HTML5 WebStorage (lokale HTML5-Speichertechnologie)_CSS/HTML

WebStorage ist eine der lokalen Speicherlösungen in HTML5, IE User Data, Flash Cookie, Google Gears und andere unzuverlässige Lösungen. Es handelt sich um eine browserkompatible lokale Speicherlösung. Es werden ausschließlich Cookies verwendet. Einige Studenten fragen sich vielleicht, warum wir das Konzept von WebStorage einführen müssen, da wir über einen lokalen Cookie-Speicher verfügen.

Was ist los mit Cookie?

Die Mängel von Keksen liegen auf der Hand

1. Datengröße: Als Speichercontainer ist die Größe von Cookies auf etwa 4 KB begrenzt, was insbesondere für aktuelle komplexe Geschäftslogikanforderungen sehr ärgerlich ist. Zusätzlich zur Speicherung einiger Konfigurationsfelder werden auch einfache Daten gespeichert Einwertige Informationen. Die meisten Entwickler wissen wirklich nicht, was sie erwartet.
2. Sicherheitsprobleme: Da das Cookie in der HTTP-Anfrage im Klartext übergeben wird (HTTPS nicht), sind die Sicherheitsprobleme immer noch riesig.
3. Netzwerkbelastung: Wir wissen, dass Cookies an jede HTTP-Anfrage angehängt und in den Headern von HttpRequest und HttpResponse übertragen werden, sodass einige unnötige Verkehrsverluste entstehen.

WebStorage

WebStorage ist eine der neuen lokalen Speicherlösungen für HTML, aber es handelt sich nicht um einen Standard, der als Ersatz für Cookies entwickelt wurde. Cookies sind als Teil des HTTP-Protokolls zur Abwicklung der Client- und Serverkommunikation unverzichtbar Zustandspersistenz. Der Zweck von WebStorage besteht darin, das Problem der lokalen Speicherung zu lösen, die nicht mit Cookies erfolgen sollte, sondern mithilfe von Cookies erfolgen muss.
WebStorage bietet zwei Arten von APIs: localStorage und sessionStorage. Der Unterschied zwischen den beiden lässt sich grob anhand der Namen erkennen, die Daten dauerhaft lokal speichern, sofern sie nicht explizit gelöscht oder gelöscht werden Die Sitzung ist für einen bestimmten Zeitraum gültig und wird automatisch gelöscht, wenn Sie den Browser schließen. Beide Objekte verfügen über eine gemeinsame API.

Code kopieren Der Code lautet wie folgt:

Schnittstellenspeicher {
schreibgeschütztes Attribut ohne Vorzeichen lange Länge;
DOMString? key (unsigned long index); );
void clear();
};



1. Länge: Das einzige schreibgeschützte Attribut, das verwendet wird, um die Anzahl der Schlüssel-Wert-Paare im Speicher zu ermitteln.

2. Schlüssel: Holen Sie sich den Schlüsselnamen des Speichers basierend auf dem Index 3. Holen Sie sich den entsprechenden Wert im Speicher basierend auf dem Schlüssel

4 den Speicher
5. RemoveItem: Löschen Sie das Schlüssel-Wert-Paar entsprechend dem Schlüsselnamen
6. Clear: Löschen Sie das Speicherobjekt


So verwenden Sie WebStorage

In einem Browser, der WebStorage implementiert, verfügt die Seite über zwei globale Objekte, localStorage und sessionStorage

Nehmen Sie localStorage als Beispiel Schauen Sie sich einen einfachen Operationscode an

Kopieren Sie den Code Der Code lautet wie folgt:

var ls=localStorage;
            console.log(ls.length);//0
            ls.setItem('name','Byron');
            ls.setItem(' age','24');
            console.log(ls.length);//2

            //遍历localStorage
            for(var i=0;i                /*
                    âge : 24
                    nom : Byron
                 */
                var key=ls.key(i);
                console.log(key+' : '+ls .getItem(key));
            }

            ls.removeItem('age');

           
            for(var i=0;i                /*
                    nom : Byron
               */
                var key=ls.key(i);
                console.log(key+' : '+ls.getItem(key));
            }
            ls.clear();//0
            console.log(ls.length);

事件

同时HTML5规定了一个storage事件, et WebStorage发生变化的时候触发，可以用此监视不同页面对stockage的修改

复制代码 代码如下 :

interface StorageEvent : Événement {
  clé DOMString d'attribut en lecture seule ;
 attribut DOMString en lecture seule ? oldValue;
 attribut en lecture seule DOMString ? newValue;
 attribut en lecture seule DOMString url;
 attribut en lecture seule Stockage ? storageArea;
};

1、key:键值对的键
2、oldValue：修改之前的value
3、newValue：修改之后的value
4、url：触发改动的页面url
5、StorageArea：发生改变的Storage

Test

复制代码

代码如下 :

window.addEventListener('storage',function(e) {                console.log(e.key+' est modifié de '+e.oldValue+' en '+e.newValue+' par '+e.url );

                 console.log(e.storageArea ==localStorage) ;

            },false);            localStorage.setItem('userName','Byron');

test.php

复制代码

代码如下:

localStorage.setItem('userName ','Casper');

Wenn Sie auf den Link auf der Seite index.php klicken, um auf test.php zuzugreifen, können Sie das Konsolenausgabeprotokoll von index.php sehen:
Benutzername wurde von http://localhost/test von Byron in Casper geändert .php
true

Warum es besser ist als Kekse

1. In Bezug auf die Kapazität bietet WebStorage im Allgemeinen 5 MB Speicherplatz in Browsern, was nicht ausreicht, um Videos und Bilder zu speichern, aber für die meisten Vorgänge ausreichend ist.
2 In Bezug auf die Sicherheit ist dies bei WebStorage nicht der Fall Eine Rolle spielt der HTTP-Header, der vom Browser gesendet wird, daher ist er relativ sicher
3. In Bezug auf den Datenverkehr kann unnötiger Datenverkehr eingespart werden, da WebStorage nicht an den Server übertragen wird, was bei hoher Frequenz immer noch sehr praktisch ist Besuche oder Webseiten, die auf mobile Geräte ausgerichtet sind.
Das bedeutet nicht, dass WebStorage Cookies ersetzen kann, aber mit WebStorage können Cookies nur das tun, was sie tun sollen – als Kanal für die Interaktion zwischen dem Client und dem Server dienen und den Client-Status aufrechterhalten. Somit ist WebStorage als lokale Speicherlösung den Cookies überlegen.

Wichtige Dinge

1. Browserkompatibilität, diese ist unter allen neuen HTML5-Funktionen fast am einfachsten zu implementieren, da sie von IE8+-Browsern unterstützt wird und in IE7 auch IE6 implementiert werden kann Verwendung von IE-Benutzerdaten.

2. Da localStorage und sessionStorage beide Objekte sind, können Sie Schlüssel-Wert-Paare auch über „.key“ oder „[key]“ abrufen und ändern, dies wird jedoch nicht empfohlen.

 2. 由于localStorage和sessionStorage都是对象，所以我饿每年也可以通过”.key”或”[key]”的方式获取、修改键值对，但不推荐这么做 。

复制代码 代码如下:

localStorage.userName='Frank';
console.log(localStorage['userName']);

3.虽然localStorage存储在本地，但不同的浏览器存储存储数据是独立的，所以在Chrome上存储的localStorage在FireFox上是获取不到的。
4. localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理，低版本IE可以使用json2.js
5.除了控制台，Chrome还为本地存储提供了非常直观的显示方式，调试的时候很方便

Code kopieren Der Code lautet wie folgt:

localStorage.userName='Frank'; console.log(localStorage['userName']);

3. Obwohl localStorage lokal gespeichert wird, speichern verschiedene Browser Daten unabhängig voneinander, sodass der in Chrome gespeicherte localStorage nicht verfügbar ist auf Firefox. 4. Für komplexe Objekte können Sie Stringify und Parse von JSON-Objekten verwenden, um sie zu verarbeiten.5 Neben der Konsole bietet Chrome auch eine sehr intuitive Anzeigemethode für den lokalen Speicher, die beim Debuggen sehr praktisch ist