Denkt man an die Speicherung von Daten im Zusammenhang mit einer Website oder Webanwendung, könnte es einem zunächst in den Sinn kommen, ein API zum Speichern von Daten in einer relationalen Datenbank wie MariaDB oder einer Dokumentendatenbank wie MongoDB auf einem Server zu erstellen. Doch auch der Browser verfügt über eine Vielzahl von Speicherimplementierungen, die für verschiedene Zwecke genutzt werden können.

Für Webentwickler:innen ist es wichtig, die verschiedenen Speichermöglichkeiten in modernen Browsern zu verstehen. Nur, wer die Vor- und Nachteile dieser Funktionen kennt, kann im nächsten Projekt fundierte Entscheidungen über deren Einsatz treffen, und so effiziente und effektive Webanwendungen erstellen.

Cookies

Website-Cookies oder HTTP-Cookies sind winzige Textdateien, die im Browser der Nutzer:innen gespeichert werden, wenn diese eine Website besuchen. Diese Cookies können Informationen enthalten, die der Website helfen, sich an die Nutzer:innen oder ihre Vorlieben zu erinnern und das Surferlebnis zu verbessern.

Cookies werden in der Regel zur Authentifizierung und Sitzungsverwaltung verwendet. Wenn sich ein:e Nutzer:in bei einer Website anmeldet, wird ein Cookie mit den Anmeldeinformationen auf dem Server erstellt und im Browser gespeichert. Dadurch kann die Website den oder die Nutzer:in erkennen und ihn oder sie auch während des Navigierens über verschiedene Seiten angemeldet lassen.

Darüber hinaus werden Cookies häufig zu Personalisierungszwecken verwendet. Sie können die Präferenzen der Nutzer:innen speichern, z. B. Sprach- oder Anzeigeeinstellungen, sodass die Website ihnen ein individuelles Erlebnis bieten kann.

Cookies setzen

Das Setzen von Cookies mit JavaScript ist etwas umständlich, da es als String geschrieben wird, der alle Attribute des Cookies enthält:

document.cookie = "Favorite=Chocolate; path=/; max-age=31536000;";

Dadurch wird ein Cookie mit dem Namen Favorite und dem Wert Chocolate, getrennt durch ein Gleichheitszeichen, erstellt und gespeichert. Die Zeichenfolge enthält auch den Pfad und das Ablaufdatum des Cookies.

Standardmäßig ist der path der aktuelle Pfad, also die Seite, die das Cookie erstellt. Wenn es sich bei diesem Pfad um einen Unterordner der Website handelt, wie test.com/cookies, ist das Cookie nur für Seiten verfügbar, die diesem Pfad untergeordnet sind. Wer möchte, dass das Cookie auf der gesamten Website verfügbar ist, muss den Stammverzeichnispfad angeben, wie im Beispiel gezeigt.

Das Attribut max-age definiert das Enddatum eines Cookies. Man könnte auch ein Datum mit dem Attribut expires im GMT-Format angeben, aber die Angabe von max-age ist einfacher, weil schneller. In diesem Fall wird das Cookie nach einem Jahr Speicherzeit gelöscht. Wenn man dieses Attribut weglässt, wird das Cookie zu einem Sitzungscookie, d. h., es wird gelöscht, sobald die Browserregisterkarte oder der Browser geschlossen wird.

Cookies sind über die Entwicklertools des Browsers zugänglich. In Safari und Firefox sind sie auf der Registerkarte Speicher zu finden, in Chrome und Edge auf der Registerkarte Anwendung. Dabei ist zu beachten, dass auch Benutzer:innen auf diese Weise auf die Cookies zugreifen und sie nach Belieben ändern können. Das Gleiche gilt auch für alle anderen Speicheroptionen, die in diesem Artikel genannt werden.

Löschen von Cookies

Falls erforderlich, kann das Cookie entfernt werden, indem die max-age auf 0 gesetzt wird:

document.cookie = "Favorite=; path=/; max-age=0;";

Es wird mit dem Namen und dem Pfad abgeglichen; der Wert des Cookies ist in diesem Fall irrelevant.

Eine Shoppingwebsite kann Cookies zudem verwenden, um sich die Artikel des Warenkorbs der Nutzer:in zu merken. Ein Cookie hat den Vorteil, dass es bei jeder Anfrage automatisch an den Server gesendet wird und dieser somit direkten Zugriff auf die Daten hat. Ich ziehe es vor, den Inhalt eines Warenkorbs in einer Datenbank auf dem Server zu speichern und nur eine eindeutige Referenz auf diesen Warenkorb entweder in einem Cookie oder in einem lokalen Speicher zu hinterlegen.

Cookie Storer

Das Setzen eines Cookies wie gezeigt ist eine synchrone Aktion. Das bedeutet, dass jede nachfolgende JavaScript-Ausführung warten muss, bis sie beendet ist. Die Interaktion mit einem Cookie ist innerhalb eines sogenannten Service Workers nicht möglich.

Um diese beiden Probleme zu lösen und den mühsamen Prozess des Cookie-Setzens mit einer Zeichenfolge zu umgehen, steht in Chromium-basierten Browsern wie Chrome, Edge und den meisten gängigen Android-Browsern der Cookie Store zur Verfügung.

Ein Service Worker ist eine JavaScript-Datei, die zwischen dem Browser und dem Server vermittelt. Sie kann jede Anfrage vom Server abfangen, ändern und beantworten. Sie läuft in einem separaten Thread, sodass sie kein mit der Website verbundenes Skript verlangsamt. Die Datei hat zudem keinen Zugriff auf das Document Object Model (DOM) der Website oder auf im Browser gesetzte Cookies, es sei denn, sie wurden mit dem Cookie Store erstellt.

Das Setzen von Cookies mit dem Cookie Store ist unkompliziert:

cookieStore.set("Favorite", "Chocolate");

Dadurch wird ein Sitzungscookie namens Favorite mit dem Wert Chocolate erstellt. Durch die Übergabe eines Objekts können weitere Optionen wie das Verfallsdatum festgelegt werden; leider ist max-age nicht verfügbar (Listing 1).

const year = 365 * 24 * 60 * 60 * 1000;

cookieStore.set({
  name: "Favorite",
  value: "Chocolate",
  expires: Date.now() + year,
});

Auch das Löschen von Cookies ist einfach; es erfordert lediglich den Namen des Cookies:

cookieStore.delete("Favorite");

Web Storage

Web Storage ist ein Mechanismus zur Speicherung von Daten als kurz- oder langfristige Key-Value-Paare. Da die Keys und Values immer Strings sind, müssen Objekte und Arrays konvertiert werden wie es die beiden folgenden Codezeilen zeigen:

// Objekte
JSON.stringify / JSON.parse;

// Arrays
array.toString / string.split(",")

Local Storage

Die im Local Storage gespeicherten Daten sind nicht an eine Sitzung (Registerkarte oder Fenster) gebunden und bleiben bestehen – sie sind beim nächsten Besuch wieder verfügbar. Daten, die in einer Private-Browsing- oder Inkognito-Sitzung gespeichert wurden, werden jedoch anschließend gelöscht.

Web Storage bietet unkomplizierte Methoden zum Speichern, Abrufen und Löschen von Daten:

localStorage.setItem(key, value);

localStorage.getItem(key);

localStorage.removeItem(key);

Ein praktisches Beispiel ist die Website https://cfp.watch, bei der die Favoriten im Local Storage abgelegt werden. Wenn der oder die Nutzer:in die Website das nächste Mal (mit demselben Browser) besucht, sind diese Favoriten wieder verfügbar.

Session Storage

Session Storage funktioniert genauso wie Local Storage – mit einer großen Ausnahme: Die gespeicherten Daten werden gelöscht, wenn eine Sitzung (Registerkarte oder Fenster) geschlossen wird. Die verfügbaren Methoden sind ähnlich:

sessionStorage.setItem(key, value);

sessionStorage.getItem(key);

sessionStorage.removeItem(key);

Session Storage kann temporäre Daten oder Zustände für eine Webanwendung speichern, wenn keine Zustandsverwaltungsbibliothek oder Frameworks wie Redux oder Pinia verwendet werden.

WebSQL

WebSQL war ein Versuch, SQLite in den Browser zu integrieren, um eine robuste Möglichkeit zum Speichern und Abfragen von Daten zu bieten. Allerdings waren nicht alle Browseranbieter überzeugt: Mozilla z. B. versuchte nicht einmal, WebSQL in den Firefox-Browser zu implementieren.

Ein weiterer Grund, warum es nicht gut angenommen wurde, war wahrscheinlich das fürchterliche API zum Schreiben von Abfragen mit Rückrufen, wie in Listing 2 gezeigt wird.

openDatabase("mydatabase", 1, "mydatabase", 5000000, function (db) {
  db.transaction(
    function (tx) {
      tx.executeSql(
        "create table rainstorms (mood text, severity int)",
        [],
        function () {
          tx.executeSql(
            "insert into...