Aufgrund der Einschränkung des Formats der Größe, des Formats und des Speicherdaten des HTML4 -ERA kann sie nur zur Verwendung von Cookie verwendet werden. Diese Beschränkungen von Cookies führen jedoch auch zu einfachen Daten wie Cookie können nur einige Kennungen wie IDs speichern.
Das Folgende ist die Einschränkung von Keksen:
Die meisten Browser unterstützen Cookie mit einem maximalen 4096 -Byte.
Der Browser beschränkt auch die Anzahl der auf dem Benutzercomputer gespeicherten Cookies. In den meisten Browsern kann jeder Standort 20 Cookies speichern.
Einige Browser geben auch absolute Beschränkungen für die Gesamtzahl der Kekse ein, die sie von allen Standorten, normalerweise 300, akzeptieren.
Die Standardsituation von Cookie wird mit der HTTP -Anfrage an den Hintergrundserver gesendet, aber nicht für alle Anfragen sind Cookies erforderlich, z.
Um eine Reihe von Beschränkungen für Cookies zu knacken, kann HTML5 eine große Menge an Daten über die neue API von JS direkt an den Client -Browser speichern und unterstützt komplexe lokale Datenbanken, um JS effizienter zu gestalten. HTML5 unterstützt zwei Arten von Webstorage:
Es gibt zwei APIs, die in H5 gespeichert sind, einer ist Webspeicher und der andere ist Web SQL. Unabhängig davon, welches auf der JavaScript -Sprache basiert, werde ich Ihnen beibringen, wie Sie Web -Speicher verwenden
3. WebspeicherHTML5 definiert den lokalen Web -Standard -Webspeicher und bietet zwei Speichertypen von API: SessionStorage und LocalStorage.
1. Lokalstorie wurde lokal gespeichert, und die Datenspeicherung ist dauerhaft. Nach dem zweiten, zweiten oder nächsten Jahr sind die Daten weiterhin verfügbar.Merkmale: ① sichere und dauerhafte Erhaltung in der Domäne. Das heißt, alle Seiten aus demselben Domänennamen im Client oder Browser können auf Lokalstorage -Daten zugreifen, und Daten werden dauerhaft gespeichert, mit Ausnahme des Löschens. Die Daten zwischen dem Client oder dem Browser sind jedoch unabhängig voneinander.
② Daten werden nicht mit der HTTP -Anforderung an den Hintergrundserver gesendet.
③ Betrachten Sie nicht die Möglichkeit für Speicherdaten, da der Browser mindestens 4 MB im HTML5 -Standard unterstützen muss.
Schauen Sie sich ein Beispiel an:
Der Code ist wie folgt:
Funktion clickCounter () {ifof (typeof (speicher)! GetElementById (Ergebnis) .innerhtml = Sie haben bereits auf die Schaltfläche + localStorage.ClickCount + Times;} else {document.getElementById (Ergebnis) .InnerHtml = Sorry, Ihr Browser unterstützt keinen Webspeicher. ;}} </script> <p> <schalttaste onclick = clickCounter () type = button> klicken Sie auf mich! </Button> </p> <div id = result> </div> <p> Klicken Sie auf die Schaltfläche, um die Zählerzunahme anzuzeigen. </p> <p> Schalten Sie die Registerkarte Browser (oder Fenster) aus, eröffnen Sie diese Seite erneut, der Zähler zählt weiter (nicht zurückgesetzt). </p> 2.SesionStorage ist während der Sitzung wirksam und die Daten werden automatisch gelöscht, nachdem der Browser geschlossen wurde.Merkmale: Sitzungskontrolle, kurzfristige Erhaltung. Das Konzept der Sitzung ähnelt dem Sitzungskonzept der Serverseite.
Kompatibilität
Hinweis: IE9 LocalStorage unterstützt keine lokalen Dateien.
Gegenwärtig unterstützen alle Mainstream -Browser die Webspeicherfunktionen von HTML5 bis zu einem gewissen Grad. Wie aus der Abbildung oben hervorgeht, haben im Grunde alle modernen Browser den Webspeicher unterstützt.
Die Android -Plattform und die jeweiligen Browser der iOS -Plattform unterstützen im Grunde die lokalen Speichereigenschaften des Webspeichers. Die aktuellen mobilen Geräte auf dem Markt sind zusätzlich zu Android -Telefonen und iPhone immer mehr Tablet und hängen grundsätzlich von zwei Plattformen ab. Mithilfe des Webspeichers am mobilen Terminal müssen wir kaum überlegen, ob der Browser unterstützt wird.
Das Folgende ist die Erkennungsmethode:
if (window.localstorage) {// Browser unterstützt LocalStorage} else {// unterstützt} if (window.SessionStorage) {// Der Browser unterstützt SessionStorage} else {// unterstützt} nicht 3. LOCALSTORAGEDie lokale Speicher -API von HTML5 entspricht dem SessionStorage. Wir nehmen als Beispiel Lokalstorage ein, führen kurz die lokale Speicherung von HTML5 ein und machen einige Beispiele für häufige Probleme wie durchquer. LocalStorage ist eine API, die lokal in HTML5 gespeichert ist. Verschiedene Browser haben eine unterschiedliche Unterstützung der API, z. B. Verwendungsmethoden, maximaler Speicherplatz usw.
Speichermethode: Speicherzeichenfolge in Schlüsselwert. Hauptanwendungen: Einkaufswagen, Kundenanmeldung, Spielarchiv. Wesen Wesen Reservierte Datentypen: Array, Bilder, JSON, Stil, Skript. Wesen Wesen (Solange es in einen String -Inhalt serialisiert werden kann, kann es gespeichert werden) Speicheradresse: C:/Benutzer/15014/AppData/Local/Google/Chrome/Benutzerdaten/Standard-/Lokalspeicher (verschiedene Computer sind unterschiedlich, Sie müssen die versteckte Dateianzeige öffnen. das C -Laufwerk.LocalStorage bietet vier Methoden, mit denen wir verwandte Vorgänge im lokalen Speicher ausführen können.
(1) LocalStorage. Der Wert davon ist, dass der Wert davon ist, dass der Wert des Parameters der Wert davon ist. wie:
LocalStorage.setItem (Name, Zhang SAN); Schlüsselwert von 28 Daten.
. wie:
var data = localStorage.getItem (Name);
(3) LocalStorage. wie:
var data2 = localStorage.removeItem (Name);
(4) localStorage.clear () Entfernen Sie alle lokal gespeicherten Daten. wie:
LocalStorage.clear () Entfernen Sie alle Daten, die lokal gespeichert sind. Wie: localStorage.clear ();
(5) Darüber hinaus entsprechen die vier Funktionen in SessionStorage im Grunde genommen der Funktionsverwendung der oben genannten Lokalstor -Klasse, die nicht im Detail erläutert wird.
Das Folgende ist ein kleines Beispiel:
<script type = text/javaScript> localStorage.setItem (Name, Zhang san); Verifizieren (); .GetItem (Alter);3.. Lokalstorage -Ablaufstrategie
Da HTML5 keine Ablaufstrategie für den lokalen Speicher festlegt, können Sie bei der Verarbeitung der Ablaufstrategie von Datenverarbeitungsdaten Ihr eigenes Ablaufstrategieprogramm wie folgt schreiben:
<! Titel> </head> <body> </body> </html : Wert, Zeit: Curtime})); 'Ergebnisse: JSON.Parse (STR) Objektagentur: 23 Name: Huangxiaojian __Proto__: Objekt Hinweis: Einzelzitate werden in Ausnahme von {} geschrieben, jeder Attributname muss doppelte Zitate sein. JSON.Stringify () wird verwendet, um die Zeichenfolge aus einem Objekt aufzulösen, wie z. B. var a = {a: 1, b: 2} Ergebnis: json GET (Schlüssel, Exp) // Exp ist die Ablaufzeit der Einstellungen {var value = localStorage.getItem (Schlüssel); (Neues Datum (neues Datum) () .Getime () -Dataobj.Time> Exp) // Wenn die aktuelle Zeit -Minus das zum Zeitpunkt der Erstellung festgelegte Speicherelement, abgelaufen ist {console.log (läuft); Eingabeaufforderung} else {console.Die Operation ist wie in der folgenden Abbildung dargestellt:
Das oben genannte ist der Inhalt dieses Artikels.