Webentwicklung: Einstellungen als JSON im LocalStorage speichern

Um Daten einer Webseite nach dem Neuladen weiter verwenden zu können, kann man verschiedene Wege gehen. Cookies Beispielsweise könnte man verwenden. Wie schauen uns in diesem Tutorial an, wie man JSON-Daten ganz einfach im LocalStorage speichern und wieder laden kann.

Einfügen

Beipiel: Website mit 2 Input, einem Select und einem Textarea-Element

Am Beipiel einer einfachen Website wollen wir uns ansehen, wir man praktisch Daten als JSON speichern und bei einem Neustart der Seite wieder verwenden kann.

Die Seite besteht zunächst natürlich aus einem einfachen HTML-Dokument, mit 2 Input-Elementen (Schriftfarbe und Schriftgröße), einem Select-Element (Schriftart) und einem Textarea-Element.

<!DOCTYPE html><br><html lang="en"><br><head><br>    <meta charset="UTF-8"><br>    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br><br>    <link rel="stylesheet" href="style.css"><br>    <script defer src="main.js"></script><br><br>    <title>Local Storage Tutorial</title><br></head><br><body><br>    <h1>Beispiel: Local Storage nutzen um Einstellungen als Json zu speichern und zu laden</h1><br><br>    <section><br>        <label for="color">Farbe</label> <br>        <input oninput="setColor(this.value);" id="color" type="color"><br><br>        <label for="size">Schriftgröße</label> <br>        <input oninput="setSize(this.value);" id="size" type="number" value="20"><br><br>        <label for="font">Schriftart</label> <br>        <select oninput="setFont(this.value);" id="font"><br>            <option value="arial">Arial</option><br>            <option value="verdana">Verdana</option><br>            <option value="times">Times New Roman</option><br>            <option value="georgia">Georgia</option><br>        </select><br>        <br>    </section><br><br>    <textarea></textarea><br><br></body><br></html>

Ein bisschen Style gibt es natürlich auch.

body{<br>    font-family: Arial, Helvetica, sans-serif;<br>}<br><br>section{<br>    display: flex;<br>    gap:0.5rem;<br>    padding: 0.25rem;<br>    align-items: center;<br>}<br><br>textarea{<br>    width: 40rem;<br>    height: 30rem;<br>}

Es ergibt sich hieraus diese einfache Website:

Einfügen

JavaScript main.js

Natürlich brachen wir noch ein JavaScript, um die eigentliche Funktionalität zu implementieren. Zunächst werden erstmal Funktionen abseits dieses Turtorials umgesetzt, um den Text im Textarea gestaltbar zu machen. Am Ende des Script finden sich schon die Funktionen "load" und "save" um die es anschließend noch gehen wird.

const colorInput = document.querySelector("#color");<br>const sizeInput = document.querySelector("#size");<br>const fontInput = document.querySelector("#font");<br>const textarea = document.querySelector("textarea");<br>textarea.addEventListener("input", save);<br><br>load(); //bei Seitenstart Einstellungen laden<br><br>//Funktionen um Eigenschaften zu setzen<br>function setColor( color ){<br>   textarea.style.color = color;<br>   save();<br>}<br><br>function setSize( size ){<br>   textarea.style.fontSize = size+"px";<br>   save();<br>}<br><br>function setFont( name ){<br>   textarea.style.fontFamily = name;<br>   save();<br>}<br><br>function setText( text ){<br>   textarea.value = text;<br>   save();<br>}<br><br><br>//Local Storage zum Speichern und Laden<br>function load(){<br><br>}<br><br>function save(){<br><br>}

Einfügen

LocalStorage und seine Eigenschaften

Der LocalStorage ist ein Möglichkeit lokal im Webbrowser Daten zu speichern. Dabei stehen etwa 5-10 MB Speicherplatz pro Domain zu Verfügung, was deutlich mehr ist als bei Cookies.

Die Daten bleiben auch nach Schließen des Browsers erhalten, solange sie nicht explizit gelöscht werden.

Der LocalStorage kann mit Hilfe einer sehr einfachen JavaScript-API, mit nur wenigen Funktion verwendet werden.

Es können unter einer Bezeichung nur Strings, also Zeichenketten, gespeichert werden. Um Objekte zu speichern, müssen diese serialisiert werden.

Der Zugriff auf den Speicher kann nur innerhalb derselben Domain erfolgen, es gibt keine domänenübergreifende Nutzung.

LocalStorage ist daher besonders nützlich für:

Speichern von Benutzereinstellungen
Caching von Anwendungsdaten
Offline-Funktionalitäten
Zwischenspeichern von Formulareingabe

Einfügen

JavaScript-Object und JSON

Zuerst einmal müssen wir die Frage klären, in welcher Form wir die Daten speichern und verwenden wollen. Hier bietet sich ein JavaScript-Object gut an.

Ein JavaScript-Object speichert Daten mit einer dazugehörigen Bezeichnung, Schlüssel oder Key genannt. In ein JS-Object können einfache Werte, aber auch Arrays und andere Objekte gespeichert werden. Hier ein Beispiel für unseren Anwendungsfall mit Bespieldaten:

const data = {<br>   color:  '#ffff00',<br>   size: 35,<br>   font: 'arial',<br>   text: 'Das ist Text aus dem Textfeld'<br>}<br>

Bleibt noch die Frage was JSON ist? JSON bedeutet JavaScript Object Notation. Es ist drückt also ein JavaScript-Object als Text aus.

Man kann mit den Funktionen "JSON.parse" und "JSON.stringify" ganz einfach JSON in JavaScript-Objekte und andersrum umwandeln. Das JSON vom obigen Objekt würde dann so aussehen:

{<br>   "color":"#ffff00",<br>   "size":35,<br>   "font":"arial",<br>   "text":"Das ist Text aus dem Textfeld"<br>}

Einfügen

Daten der Seite im LocalStorage speichern

Wir wollen mit dem obigen Hintergrundwissen nun also die Funktion "load" implementieren. Dazu gehen wir schrittweise so vor:

function save(){<br>   //1. JavaScript-Object mit den Daten, die gespeichert <br>   // werden sollen anlegen<br>   const data = {<br>      color: colorInput.value,<br>      size: parseInt(sizeInput.value),<br>      font: fontInput.value,<br>      text: textarea.value<br>   }<br><br>   //2. JavaScript-Object in JSON umwandeln<br>   const json = JSON.stringify(data);<br><br>   //3. JSON im LocalStorage speichern<br>   localStorage.setItem("settings", json);<br>}

Wenn die Seite nun genutzt wird, werden bei einer Änderung der Daten, diese immer aktuell im LocalStorage gespeichert. Das lässt sich in der Entwicklerkonsole (F12) einfach prüfen.

Einfügen

Bei Seitenstart Daten aus LocalStorage laden und verwenden

Die Funktion "load" wird schon jetzt bei Seitenstart aufgerufen. Wir müssen sie noch implementieren und aus dem LocalStorage die zuletzt verwendeten Daten wieder herstellen.

function load(){<br>   //1. JSON-String aus LocalStorage holen<br>   const json = localStorage.getItem("settings");<br><br>   //2. Gültigkeit prüfen<br>   if(json === null){<br>      console.log("Keine Settings vorhanden");<br>      return;<br>   }<br><br>   //3. Gültiges JSON in JavaScript-Object umwandeln<br>   const settings = JSON.parse( json );<br><br>   //4. Die Bedienelement benötigen die <br>   //geladenen Werte<br>   colorInput.value = settings.color;<br>   sizeInput.value = settings.size;<br>   fontInput.value = settings.font;<br><br>   //5.Daten mittels vorhandener Methoden setzen<br>   setColor( settings.color );<br>   setSize( settings.size );<br>   setFont( settings.font );<br>   setText( settings.text );<br>}

Wir sind fertig! Natürlich, man könnte hier noch einiges optimieren, beim Laden wird durch die Nutzung der Set-Funktionen sehr häufig unnötig gespeicht. Es funktioniert aber auch jetzt schon, dass bei jedem Neuladen der Seite, die zuvor verwendeten Settings wiederhergestellt werden.

Einfügen

Das ganze Projekt als Download

Du möchtest das Tutorial-Projekt komplett als Download? Kein Problem, für Patreon-Unterstützer steht das Projekt auch als Download bereit:

Download via Patreon

Einfügen

Webentwicklung: Einstellungen als JSON im LocalStorage speichern

Beipiel: Website mit 2 Input, einem Select und einem Textarea-Element

JavaScript main.js

LocalStorage und seine Eigenschaften

JavaScript-Object und JSON

Daten der Seite im LocalStorage speichern

Bei Seitenstart Daten aus LocalStorage laden und verwenden

Das ganze Projekt als Download

Lernen macht hungrig oder? Dann koch dir doch was!

Dein Feedback ist uns wichtig

Bei Weitergabe bitte beachten