Werte einer Webseite nach dem Reload speichern: So geht’s ganz einfach mit JavaScript!

Kennst du das? Du füllst ein Formular aus, klickst versehentlich auf „Reload” und all deine Eingaben sind weg. Frustrierend, oder? Dieses Problem lässt sich mit etwas JavaScript ganz einfach lösen. In diesem Artikel zeige ich dir verschiedene Methoden, wie du Werte auf deiner Webseite speichern kannst, auch wenn die Seite neu geladen wird. Wir betrachten verschiedene Speichertechniken und erklären, wann welche Methode am besten geeignet ist.

Warum ist das Speichern von Werten wichtig?

Das Speichern von Benutzereingaben und anderen Daten über Page Reloads hinweg verbessert die User Experience (UX) erheblich. Stell dir folgende Szenarien vor:

• Formulare: Wie bereits erwähnt, vermeidet es Frustration, wenn Benutzer lange Formulare ausfüllen.
• E-Commerce: Der Warenkorb sollte auch nach einem Reload erhalten bleiben.
• Filter- und Sortieroptionen: Die ausgewählten Filter auf einer Produktseite sollten auch nach einem Reload angewendet bleiben.
• Dark Mode/Light Mode: Die gewählte Theme-Einstellung sollte gespeichert werden.
• Spiele: Spielstände sollten gesichert werden, damit Benutzer später weiterspielen können.

Kurz gesagt: Das Speichern von Daten trägt dazu bei, dass deine Webseite benutzerfreundlicher und professioneller wirkt.

Methoden zum Speichern von Werten mit JavaScript

Es gibt verschiedene Techniken, um Werte im Browser zu speichern und sie nach einem Reload wiederherzustellen. Die gängigsten sind:

1. LocalStorage
2. SessionStorage
3. Cookies
4. URL-Parameter

1. LocalStorage

LocalStorage ist eine Web Storage API, die es dir ermöglicht, Daten im Browser des Benutzers zu speichern. Die Daten bleiben erhalten, auch wenn der Browser geschlossen und wieder geöffnet wird. Sie sind an die Domain der Webseite gebunden.

Wie funktioniert LocalStorage?

LocalStorage speichert Daten als Schlüssel-Wert-Paare. Sowohl der Schlüssel als auch der Wert müssen Strings sein. Hier sind die wichtigsten Methoden:

• localStorage.setItem(key, value): Speichert einen Wert unter einem bestimmten Schlüssel.
• localStorage.getItem(key): Ruft den Wert ab, der unter einem bestimmten Schlüssel gespeichert ist.
• localStorage.removeItem(key): Entfernt das Element mit dem angegebenen Schlüssel.
• localStorage.clear(): Entfernt alle Elemente aus dem LocalStorage.

Beispiel für LocalStorage:

Nehmen wir an, wir wollen den Namen eines Benutzers speichern:

// Speichern des Namens
localStorage.setItem('username', 'Max Mustermann');

// Abrufen des Namens
let username = localStorage.getItem('username');
console.log(username); // Ausgabe: Max Mustermann

// Entfernen des Namens
localStorage.removeItem('username');

Vorteile von LocalStorage:

• Einfache Verwendung
• Große Speicherkapazität (mehrere Megabyte)
• Daten bleiben dauerhaft erhalten (bis sie explizit gelöscht werden)

Nachteile von LocalStorage:

• Daten sind für JavaScript zugänglich und können daher anfällig für Cross-Site Scripting (XSS) Angriffe sein.
• Nur Strings können direkt gespeichert werden. Für komplexere Daten musst du diese in Strings umwandeln (z.B. mit JSON.stringify()).

2. SessionStorage

SessionStorage ähnelt LocalStorage, speichert aber Daten nur für die Dauer einer Browsersitzung. Sobald der Benutzer den Browser schließt, werden die Daten gelöscht.

Wie funktioniert SessionStorage?

Die Methoden sind identisch zu LocalStorage: setItem(), getItem(), removeItem() und clear().

Beispiel für SessionStorage:

// Speichern der Seitenaufrufe
sessionStorage.setItem('pageViews', '5');

// Abrufen der Seitenaufrufe
let pageViews = sessionStorage.getItem('pageViews');
console.log(pageViews); // Ausgabe: 5

Vorteile von SessionStorage:

• Einfache Verwendung
• Daten werden automatisch gelöscht, wenn der Browser geschlossen wird

Nachteile von SessionStorage:

• Daten gehen beim Schließen des Browsers verloren
• Nur Strings können direkt gespeichert werden.

3. Cookies

Cookies sind kleine Textdateien, die vom Server an den Browser gesendet und dort gespeichert werden. Sie werden häufig verwendet, um Benutzer zu identifizieren oder Einstellungen zu speichern.

Wie funktionieren Cookies?

Cookies werden über den document.cookie String gesetzt und gelesen. Das Format ist key=value; expires=date; path=path.

Beispiel für Cookies:

// Setzen eines Cookies
document.cookie = "username=MaxMustermann; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";

// Auslesen eines Cookies
function getCookie(name) {
  let cookieName = name + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(cookieName) == 0) {
      return c.substring(cookieName.length, c.length);
    }
  }
  return "";
}

let username = getCookie("username");
console.log(username); // Ausgabe: MaxMustermann

Vorteile von Cookies:

• Weit verbreitet und gut unterstützt
• Können sowohl vom Client (JavaScript) als auch vom Server gesetzt werden

Nachteile von Cookies:

• Begrenzte Größe (ca. 4KB)
• Können die Performance beeinträchtigen, da sie bei jeder Anfrage an den Server gesendet werden
• Datenschutzbedenken (Tracking)
• Die JavaScript-API für Cookies ist etwas umständlicher zu bedienen als LocalStorage oder SessionStorage.

4. URL-Parameter

URL-Parameter sind Werte, die an die URL angehängt werden. Sie werden oft verwendet, um Daten zwischen Seiten zu übergeben oder den Zustand der Webseite zu speichern.

Wie funktionieren URL-Parameter?

URL-Parameter werden nach einem Fragezeichen (?) an die URL angehängt. Mehrere Parameter werden durch ein Kaufmanns-Und (&) getrennt. Zum Beispiel: www.example.com?name=Max&age=30.

Beispiel für URL-Parameter:

// Abrufen von URL-Parametern
function getParameterByName(name, url = window.location.href) {
    name = name.replace(/[[]]/g, '\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/+/g, ' '));
}

let name = getParameterByName('name');
let age = getParameterByName('age');

console.log(name); // Ausgabe: Max
console.log(age); // Ausgabe: 30

Vorteile von URL-Parametern:

• Einfach zu implementieren
• Kann verwendet werden, um Daten zwischen verschiedenen Webseiten zu übertragen

Nachteile von URL-Parametern:

• Begrenzte Größe
• Daten sind sichtbar in der URL (nicht geeignet für sensible Daten)
• Kann die Lesbarkeit der URL beeinträchtigen

Wann welche Methode verwenden?

Die Wahl der richtigen Speichermethode hängt von verschiedenen Faktoren ab:

• Dauerhaftigkeit: Sollen die Daten dauerhaft gespeichert werden (LocalStorage), nur für die Dauer einer Sitzung (SessionStorage) oder nur temporär über eine URL (URL-Parameter)?
• Größe: Wie groß sind die zu speichernden Daten? Cookies haben eine begrenzte Größe.
• Sicherheit: Sind die Daten sensibel? Cookies und URL-Parameter sind weniger sicher als LocalStorage oder SessionStorage.
• Komplexität: Wie komplex sind die zu speichernden Daten? Für komplexe Objekte ist LocalStorage oder SessionStorage in Kombination mit JSON.stringify() und JSON.parse() geeignet.

Hier eine kleine Entscheidungshilfe:

• LocalStorage: Für dauerhafte, nicht-sensible Daten, die nicht an eine Sitzung gebunden sind (z.B. Theme-Einstellungen).
• SessionStorage: Für temporäre Daten, die nur für die Dauer einer Sitzung benötigt werden (z.B. Warenkorbinhalte, Filteroptionen).
• Cookies: Für kleine Datenmengen, die sowohl vom Client als auch vom Server benötigt werden (z.B. Tracking-Informationen, Session-IDs). Sollten sparsam verwendet werden wegen der Performance.
• URL-Parameter: Für die Übergabe von Daten zwischen Seiten oder für einfache Zustandsinformationen (z.B. Suchbegriffe).

Beispiel: Formularwerte mit LocalStorage speichern

Hier ein konkretes Beispiel, wie du Formularwerte mit LocalStorage speichern und wiederherstellen kannst:

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">E-Mail:</label>
  <input type="email" id="email" name="email"><br><br>

  <button type="submit">Senden</button>
</form>

const form = document.getElementById('myForm');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');

// Funktion zum Speichern der Formularwerte
function saveFormValues() {
  localStorage.setItem('name', nameInput.value);
  localStorage.setItem('email', emailInput.value);
}

// Funktion zum Wiederherstellen der Formularwerte
function restoreFormValues() {
  nameInput.value = localStorage.getItem('name') || ''; // Defaultwert, falls nichts gespeichert ist
  emailInput.value = localStorage.getItem('email') || '';
}

// Speichern der Werte bei jeder Änderung
nameInput.addEventListener('input', saveFormValues);
emailInput.addEventListener('input', saveFormValues);

// Wiederherstellen der Werte beim Laden der Seite
window.addEventListener('load', restoreFormValues);

// Verhindern des Standard-Formularverhaltens beim Absenden
form.addEventListener('submit', function(event) {
  event.preventDefault();
  alert('Formular abgesendet!');
});

Dieser Code speichert die Werte der Input-Felder „name” und „email” in LocalStorage, sobald sich die Eingabe ändert. Beim Laden der Seite werden die gespeicherten Werte wiederhergestellt.

Fazit

Das Speichern von Werten auf einer Webseite über Page Reloads hinweg ist mit JavaScript relativ einfach zu realisieren. LocalStorage, SessionStorage, Cookies und URL-Parameter bieten verschiedene Möglichkeiten, je nach Anwendungsfall. Wähle die Methode, die am besten zu deinen Bedürfnissen passt, und verbessere so die User Experience deiner Webseite.