Tutorial zur Verwendung von LocalStorage in HTML5

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung von LocalStorage in HTML5 vorgestellt. LocalStorage wird für die lokale ausgehende Interaktion zwischen Browser und System verwendet. Freunde, die es brauchen, können sich darauf beziehen, was LocalStorage ist

Vor ein paar Tagen stellte ich fest, dass es in einem alten Projekt eine seltsame Operation von Keksen gab. Nach der Konsultation wollte ich einige Informationen zwischenspeichern, um zu vermeiden, dass Parameter an die URL weitergegeben werden, aber ich habe nicht überlegt, welche Probleme Cookies mitbringen würden:

① Die Größe des Keks ist auf etwa 4K begrenzt, was nicht für die Speicherung von Geschäftsdaten geeignet ist.

② Cookies werden jedes Mal mit HTTP -Transaktionen gesendet, wobei die Bandbreite verschwendet wird

Wir machen mobile Projekte, daher ist die tatsächliche Technologie, die hier für den Einsatz geeignet ist, lokalstorage. LocalStorage kann als Optimierung von Cookies bezeichnet werden. Die Verwendung kann das Speichern von Daten auf der Client -Seite erleichtern und wird nicht mit HTTP übertragen, aber es ist nicht ohne Probleme:

① Die LocalStorage -Größe ist auf etwa 5 Millionen Zeichen begrenzt, und jeder Browser ist inkonsistent

② LocalStorage ist im Datenschutzmodus nicht lesbar

③ LocalStorage ist im Wesentlichen Lesen und Schreiben von Dateien. Wenn es zu viele Daten gibt, steckt es mehr fest (Firefox importiert Daten gleichzeitig in den Speicher in den Speicher, und es wird beängstigend sein, wenn Sie darüber nachdenken).

④ LocalStorage kann nicht von Crawler gekrabbt werden. Verwenden Sie sie nicht, um URL -Parameter vollständig zu ersetzen

Die Mängel verbergen die Verdienste nicht und alle oben genannten Probleme können vermieden werden. Daher sollte unser Fokus darauf liegen, wie man Lokalstorage verwendet und wie sie korrekt verwendet werden.

Verwendung von lokaler Storien

Es gibt zwei Arten von Lokalstorage -Speicherobjekten:

① SESSIsionStrage: Sitzung bedeutet Sitzung. Hier bezieht sich die Sitzung auf die Gültigkeitsdauer des Sitzungsobjekts, wenn ein Benutzer eine bestimmte Website durchsucht.

② LocalStorage: Speichern Sie die Daten auf dem Client -Hardware -Gerät, unabhängig davon, was es ist, bedeutet dies, dass die Daten das nächste Mal vorhanden sind, wenn Sie den Computer öffnen.

Der Unterschied zwischen den beiden besteht darin, dass eine vorübergehende Erhaltung und die andere langfristige Erhaltung ist.

Hier ist ein einfacher Code, um seine grundlegende Verwendung zu veranschaulichen: