localStorage

Vorbemerkung: Eigentlich genügt der auf der vorigen Seite gezeigte Ansatz (JSON aus Datei laden und dort speichern). Es ist aber trotzdem nützlich, localStorage zu kennen (z.B. für die Webentwicklung).

Bei der Programmierung mit JavaScript im Browser steht ein Objekt namens localStorage zur Verfügung, in dem Daten gespeichert werden können.

Es gibt ein Open-Source-Projekt namens node-localstorage auf GitHub, das die Funktionalität von localStorage für Node.js-Projekte bereitstellt.

npm install node-localstorage

Die Einbindung von localStorage kann so mit erfolgen:

import { LocalStorage } from 'node-localstorage';
const localStorage = new LocalStorage('./database');

Hierdurch wird ein neues Verzeichnis database in unserem Projekt erstellt. In diesem werden die Daten in Dateien als Strings bzw. Text gespeichert. Dies erfolgt mit der Methode localStorage.setItem():

localStorage.setItem("college", "DHBW Lörrach");
localStorage.setItem("students", "2000");

localStorage.setItem hat zwei Parameter:

• Name des Schlüssels (key)
• der zu speichernde Wert (value)

Durch das obige Beispiel entstehen zwei Dateien im Verzeichnis database:

• college
• students

in denen die entsprechenden Werte zu finden sind, die bei dem Aufruf von localStorage.setItem als zweites Argument angegeben wurden.

Mit localStorage.getItem kann unter Angabe des passenden Schlüssels der gespeicherte Wert aus der Datenbank geladen werden:

const data1 = localStorage.getItem("college");
const data2 = localStorage.getItem("students");

Wenn wir komplexere Datenstrukturen haben, dann empfiehlt es sich, die Daten mit JSON.stringify als JSON-String umzuwandeln und zu speichern:

const myContacts = [
    {
      id: 1,
      name: "Alice"
    },
    {
      id: 2,
      name: "Bob"
    }
];
 
const jsonContacts = JSON.stringify(myContacts);
 
localStorage.setItem("contacts", jsonContacts);

Die Werte aus der Datenbank sind textbasierte JSON-Strings und können nach dem Auslesen durch JSON.parse() in JavaScript-Objekte umgewandelt werden:

const dataString = localStorage.getItem("contacts");
 
const contacts = JSON.parse(dataString);

JSON und die Methoden JSON.stringify() bzw. JSON.parse() werden auf der vorigen Seite beschrieben.

Jedes Mal, wenn sich die Daten ändern, dann sollten diese im localStorage abgespeichert werden:

// Neuer Kontakt dem Array hinzufügen
contacts.push({id:3, name:"Charlie"});
 
const jsonStr = JSON.stringify(contacts);
localStorage.setItem("contacts", jsonStr);
 
// oder als eine Anweisung zusammengefasst:
// localStorage.setItem("contacts", JSON.stringify(contacts));

Mit localStorage.setItem("contacts") werden die bestehenden Daten überschrieben. Die eigentliche Verwaltung der Daten findet also in JavaScript statt und localStorage wird lediglich für die persistente Speicherung der Daten eingesetzt.

Für unser Programm genügt meistens localStorage, weil das Programm nur von einer Person verwendet wird und weil die Datenmenge und -struktur eher überschaubar ist. Für eine anspruchsvollere Datenverarbeitung sind andere Ansätze wie z.B. relationale Datenbanken mit SQL besser geeignet.

Weitere Bemerkungen:

• localStorage speichert lediglich String bzw. Text ab.
• localStorage speichert die Daten in Dateien, die somit im Projekt auch nach einem Neustart erhalten bleiben.
• localStorage.setItem() überschreibt bestehende Daten.
• localStorage.clear() löscht ALLE Daten im localStorage.
• Browser haben ein vordefiniertes localStorage-Objekt, dessen API in der Bilbiothek node-localstorage für Node.js nachgebildet wird.

Es bietet sich an, für den Umgang mit localStorage eine eigene Datei zu erstellen, in der der Datenbankzugriff durch passende Funktionen erfolgt. Durch import/export können diese Funktionen in anderen Dateien/Modulen verwendet werden.