Beispiele für Websites, auf denen localStorage verwendet werden sollte oder wird

localStorage ist eine neue JavaScript-API in HTML5, mit der wir Daten in Schlüssel/Wert-Paaren im Browser eines Benutzers speichern können. Es ist ein wenig wie Cookies, außer:

• Cookies laufen ab und werden oft gelöscht. localStorage ist für immer (bis es explizit gelöscht wird).
• localStorage wird nicht in HTTP-Anfragen gesendet. Sie müssen es explizit anfordern.
• Sie können viel mehr Daten in localStorage speichern als in Cookies.
• Die API für localStorage ist extrem einfach und unkompliziert.

Wenn Sie sich weiter einarbeiten müssen, habe ich kürzlich ein Video-Screencast zu localStorage erstellt. So funktioniert es:

/* Set some data */
localStorage.setItem("key", "value");

/* Get some data */
localStorage.getItem("key");

Keine Bibliotheken erforderlich, das ist reines JavaScript. Wenn Sie möchten, können Sie Modernizr verwenden, um es mit Modernizr.localstorage zu testen.

OK, das sind alle technischen Details. Sehen wir uns einige Orte im Web an, die es nutzen könnten, nutzen sollten oder bereits nutzen. Hoffentlich inspiriert das Ihre eigenen Websites.

NUTZT localStorage

Snapbird (ein leistungsfähiges Twitter-Suchtool) merkt sich den letzten Stream einer Person, den Sie durchsucht haben. Es wird davon ausgegangen, dass Sie beim nächsten Besuch wahrscheinlich dieselbe Person durchsuchen werden, und dies spart Ihnen eine Sekunde. Wenn nicht, können Sie es einfach löschen und ersetzen. Ich finde es nützlich, da ich normalerweise nach alten Tweets von mir suche.

Das Webbie Madness-Event dieses Jahr hatte ein großes Abstimmungsraster im Stil von March Madness, bei dem die Leute ermutigt wurden, in mehreren Runden Gewinner auszuwählen. Die erste Runde hatte 32 Personen in 16 Kämpfen. Die Namen der Personen waren verschleiert. Es dauerte eine Weile, um herauszufinden, wer wer war und wen man wählen sollte, und es war nichts, was ich in einer einzigen „Sitzung“ tun konnte. Ich schlug vor, dass sie die Stimmen speichern, während die Leute sie abgaben, damit Sie jederzeit zurückkommen und fertig werden könnten. Wie totale Badasses haben sie es getan!

JSBin (von Remy Sharp, der auch Snapbird gemacht hat, wer hätte das gedacht) ermöglicht es Ihnen, Ihre HTML/JavaScript-Startvorlage zu speichern, damit Sie beim nächsten Besuch dieselbe Vorlage verwenden können.

SOLLTE localStorage verwenden

Typekit hat ein Typentester-Werkzeug, wenn Sie eine bestimmte Schriftart anzeigen. Sie können Ihren eigenen Text in das Feld eingeben, um zu sehen, wie er in dieser Schriftart aussieht. Leider ist dieser benutzerdefinierte Text weg, wenn Sie zu einer anderen Schriftart wechseln. Dies wäre ein großartiger Anwendungsfall für localStorage. Wenn sich der Wert in diesem Bereich ändert, speichern Sie ihn in localStorage und laden Sie ihn beim Laden der Seite wieder ein. Ich denke, das wäre eine großartige Zeitersparnis, da ich denke, dass das Springen zwischen verschiedenen Schriftarten, um diesen Text anzuzeigen, ein ziemlich häufiger Anwendungsfall ist.

CSS Lint hat ein Gitter mit Kontrollkästchen, welche Funktionen CSS Lint für Sie überprüfen soll, wenn Sie Ihr CSS testen. Es wäre wirklich schön, wenn dies localStorage verwenden würde, um sich die von Ihnen verwendete Kontrollkästchenkonfiguration zu merken, sodass sie beim Neuladen der Seite oder beim späteren Besuch gleich bleibt. Wenn Ihnen also das Kontrollkästchen „IDs nicht verwenden“ nicht gefällt, können Sie es dauerhaft deaktivieren =).

So ziemlich jede Website mit einem Anmeldeformular könnte localStorage verwenden, um den Benutzernamen zu speichern. Wenn ein Benutzer zurückkehrt, ist das ein Schritt weniger für ihn, um sich anzumelden.

Zeldman.com hat Links im Footer, mit denen Sie die Farben der Website zwischen zwei Versionen umschalten können. Dies wird als Cookie gespeichert, was großartig ist, aber der Zerbrechlichkeit von Cookies unterliegt. Jede Website wie diese mit alternativen Styling-Optionen (z. B. Schriftgrößenumschaltung) könnte diese Informationen in localStorage speichern und sie besser persistent machen.

MEHR

Das ist nur die Spitze des Eisbergs. Ich bin sicher, Leute mit entwicklerorientierteren Köpfen können sich größere und bessere Ideen dafür ausdenken. Speichern des Fortschritts in einem Spiel? Caching von Assets? Was habt ihr noch?

Viel mehr Infos von Mark Pilgrim.