HTML - Webspeicher

Leon A. -

Arten von Web-Speicher

Es gibt zwei Arten von Web-Speicher: Local Storage und Session Storage. Beide ermöglichen es, Schlüssel-Wert-Paare im Browser zu speichern, haben aber unterschiedliche Lebensdauern und Geltungsbereiche.

Local Storage

Local Storage ist eine Art von Web-Speicher, die es ermöglicht, Daten im Browser ohne Ablaufdatum zu speichern. Die im Local Storage gespeicherten Daten bleiben auch nach dem Schließen des Browserfensters erhalten. Dies macht ihn nützlich für die Speicherung von Daten, die längere Zeit verfügbar bleiben sollen.

Um Daten im Local Storage zu speichern, können Sie das localStorage-Objekt verwenden.

Beispiel: Einen Wert im Local Storage speichern

localStorage.setItem('username', 'JohnDoe');

Wir speichern ein Schlüssel-Wert-Paar, bei dem der Schlüssel 'username' und der Wert 'JohnDoe' ist. Um die gespeicherten Daten abzurufen, können Sie die getItem()-Methode verwenden:

Beispiel: Einen Wert aus dem Local Storage abrufen

const username = localStorage.getItem('username');
console.log(username); // Ausgabe: 'JohnDoe'

Sie können den Wert eines gespeicherten Elements auch ändern, indem Sie setItem() erneut mit demselben Schlüssel und einem neuen Wert verwenden:

Beispiel: Einen Wert im Local Storage ändern

localStorage.setItem('username', 'JaneSmith');

Session Storage

Session Storage ist eine weitere Art von Web-Speicher, die es ermöglicht, Daten für eine einzelne Sitzung zu speichern. Die im Session Storage gespeicherten Daten bleiben nur so lange im Browser, bis das Browserfenster oder der Tab geschlossen wird. Sobald die Sitzung endet, werden die Daten gelöscht.

Um Daten im Session Storage zu speichern, können Sie das sessionStorage-Objekt verwenden, das die gleichen Methoden wie localStorage hat.

Beispiel: Einen Wert im Session Storage speichern

sessionStorage.setItem('theme', 'dark');

Wir speichern ein Schlüssel-Wert-Paar, bei dem der Schlüssel 'theme' und der Wert 'dark' ist. Um die gespeicherten Daten abzurufen, können Sie die getItem()-Methode verwenden:

Beispiel: Einen Wert aus dem Session Storage abrufen

const theme = sessionStorage.getItem('theme');
console.log(theme); // Ausgabe: 'dark'

Sie können die gespeicherten Daten im Session Storage auf die gleiche Weise wie im Local Storage ändern, indem Sie die setItem()-Methode mit demselben Schlüssel und einem neuen Wert verwenden:

Beispiel: Einen Wert im Session Storage ändern

sessionStorage.setItem('theme', 'light');

Sowohl Local Storage als auch Session Storage haben ihre eigenen Anwendungsbereiche, basierend auf der Lebensdauer und dem Geltungsbereich der Daten, die Sie speichern möchten. Local Storage eignet sich gut für die Speicherung von Daten, die auch nach dem Schließen des Browsers erhalten bleiben sollen, während Session Storage nützlich ist für die Speicherung von Daten, die spezifisch für eine einzelne Sitzung oder Seite sind.

Arbeiten mit Web Storage

Web Storage bietet Methoden zum Speichern, Abrufen und Entfernen von Daten im Browser. Schauen wir uns an, wie man mit Daten sowohl im Local Storage als auch im Session Storage arbeitet.

Daten speichern

Um Daten im Web Storage zu speichern, können Sie die Methode setItem() verwenden. Diese Methode nimmt zwei Argumente: den Schlüssel (ein String) und den Wert, den Sie speichern möchten.

Sie können verschiedene Datentypen im Web Storage speichern, wie Strings, Zahlen und Objekte. Beim Speichern von Objekten müssen Sie diese mit JSON.stringify() in einen String umwandeln, bevor Sie sie speichern.

Beispiel: Speichern eines Strings und eines Objekts im Local Storage

// Speichern eines Strings
localStorage.setItem('username', 'JohnDoe');

// Speichern eines Objekts
const user = {
  name: 'John Doe',
  age: 25,
  email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));

Daten abrufen

Um Daten aus dem Web Storage abzurufen, können Sie die Methode getItem() verwenden. Diese Methode nimmt ein Argument: den Schlüssel der Daten, die Sie abrufen möchten.

Wenn die gespeicherten Daten ein String sind, können Sie sie direkt verwenden. Wenn Sie jedoch ein Objekt gespeichert haben, müssen Sie es mit JSON.parse() wieder in ein Objekt umwandeln.

Beispiel: Daten aus dem Local Storage abrufen

// Einen String abrufen
const username = localStorage.getItem('username');
console.log(username); // Ausgabe: 'JohnDoe'

// Ein Objekt abrufen
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
console.log(user.name); // Ausgabe: 'John Doe'
console.log(user.age); // Ausgabe: 25
console.log(user.email); // Ausgabe: 'john@example.com'

Daten entfernen

Um Daten aus dem Web Storage zu entfernen, haben Sie zwei Möglichkeiten:

Option Beschreibung
removeItem() Entfernt ein bestimmtes Schlüssel-Wert-Paar
clear() Entfernt alle im Web Storage gespeicherten Daten

Beispiel: Daten aus dem Local Storage entfernen

// Entfernen eines bestimmten Elements
localStorage.removeItem('username');

// Entfernen aller Daten
localStorage.clear();

Die gleichen Methoden (setItem(), getItem(), removeItem() und clear()) können mit Session Storage verwendet werden, indem localStorage durch sessionStorage ersetzt wird.

Beachten Sie, dass im Web Storage gespeicherte Daten domänenspezifisch sind. Jede Domäne hat ihren eigenen separaten Speicherbereich, und JavaScript von einer Domäne kann nicht auf Daten zugreifen, die von einer anderen Domäne gespeichert wurden.

Web-Storage-Ereignisse

Web Storage bietet Ereignisse, mit denen Sie auf Änderungen der gespeicherten Daten reagieren können. Diese Ereignisse werden ausgelöst, wenn Daten im Local Storage oder Session Storage gespeichert, geändert oder entfernt werden.

Das storage-Ereignis wird immer dann ausgelöst, wenn eine Änderung im Web Storage stattfindet. Dieses Ereignis wird für das window-Objekt aller Seiten mit demselben Ursprung ausgelöst, die Zugriff auf den Speicherbereich haben. Das Ereignisobjekt, das an den Ereignis-Listener übergeben wird, enthält nützliche Eigenschaften wie:

Eigenschaft Beschreibung
key Der Schlüssel des Elements, das geändert wurde (hinzugefügt, aktualisiert oder entfernt).
oldValue Der alte Wert des Elements vor der Änderung (null, wenn ein neues Element hinzugefügt wurde).
newValue Der neue Wert des Elements nach der Änderung (null, wenn ein Element entfernt wurde).
url Die URL der Seite, die die Änderung vorgenommen hat.
storageArea Das Speicherobjekt (localStorage oder sessionStorage), das betroffen war.

Um Storage-Ereignisse zu behandeln, können Sie die addEventListener()-Methode für das window-Objekt verwenden.

Beispiel: Behandlung von Storage-Ereignissen

window.addEventListener('storage', function(event) {
  console.log('Storage-Ereignis ausgelöst');
  console.log('Schlüssel:', event.key);
  console.log('Alter Wert:', event.oldValue);
  console.log('Neuer Wert:', event.newValue);
  console.log('URL:', event.url);
  console.log('Speicherbereich:', event.storageArea);
});

Es ist wichtig zu beachten, dass das storage-Ereignis nicht auf der Seite ausgelöst wird, die die Änderung vorgenommen hat. Es wird nur auf anderen Seiten mit demselben Ursprung ausgelöst, die Zugriff auf den Speicherbereich haben. Dies ermöglicht die Kommunikation zwischen verschiedenen Seiten oder Tabs Ihrer Anwendung.

Beispiel: Synchronisierung von Daten zwischen Seiten

// Seite 1
localStorage.setItem('theme', 'dark');

// Seite 2
window.addEventListener('storage', function(event) {
  if (event.key === 'theme') {
    document.body.className = event.newValue;
  }
});

Seite 1 setzt den Wert des 'theme'-Schlüssels im Local Storage. Seite 2 lauscht auf Storage-Ereignisse und prüft, ob der geänderte Schlüssel 'theme' ist. Falls ja, aktualisiert sie den Klassennamen des <body>-Elements auf den neuen Wert und wendet so die Themenänderung an.

Storage-Ereignisse bieten eine Möglichkeit, auf Änderungen im Web Storage zu reagieren und ermöglichen die Kommunikation und Synchronisierung zwischen verschiedenen Seiten oder Tabs Ihrer Anwendung. Sie können für verschiedene Zwecke genutzt werden, wie z.B. die Synchronisierung von Benutzereinstellungen, die Aktualisierung angezeigter Daten in Echtzeit oder das Auslösen bestimmter Aktionen basierend auf Änderungen der gespeicherten Daten.

Web-Speicher-Sicherheit

Bei der Verwendung von Web-Speicher (Local Storage und Session Storage) zur Datenspeicherung im Browser sollten Sie Sicherheitsaspekte berücksichtigen, um Ihre Anwendung und Benutzerdaten vor unbefugtem Zugriff oder Angriffen zu schützen.

Eines der Hauptsicherheitsrisiken im Zusammenhang mit Web-Speicher sind Cross-Site-Scripting-Angriffe (XSS). XSS-Angriffe treten auf, wenn bösartige Skripte in Ihre Anwendung eingeschleust und im Kontext Ihrer Seite ausgeführt werden. Wenn Sie sensible Daten ohne angemessene Sicherheitsmaßnahmen im Web-Speicher ablegen, könnte ein Angreifer auf diese Daten zugreifen und sie stehlen.

Um XSS-Angriffe zu verhindern, sollten Sie immer alle Benutzereingaben validieren und bereinigen, bevor Sie sie im Web-Speicher speichern. Das bedeutet, die Eingabe auf bösartige Zeichen oder Skripte zu überprüfen und diese zu entfernen oder zu kodieren. Sie können Bibliotheken oder Frameworks verwenden, die integrierte Funktionen zur Eingabevalidierung und -bereinigung bieten, um diesen Prozess zu unterstützen.

Beispiel: Benutzereingabe bereinigen

function sanitizeInput(input) {
  // Entfernt alle HTML-Tags und Sonderzeichen
  return input.replace(/<[^>]*>?/gm, '').replace(/[^\w\s]/gi, '');
}

const userInput = '<script>alert("XSS-Angriff!");</script>';
const sanitizedInput = sanitizeInput(userInput);
localStorage.setItem('userInput', sanitizedInput);

Ein weiterer Sicherheitsaspekt ist die Verschlüsselung sensibler Daten vor der Speicherung im Web-Speicher. Obwohl auf Web-Speicher-Daten nicht direkt von anderen Websites zugegriffen werden kann, können sie dennoch von jedem gelesen werden, der Zugang zum Gerät oder Browser des Benutzers hat. Die Verschlüsselung der Daten fügt eine zusätzliche Schutzschicht hinzu.

Zur Datenverschlüsselung können Sie Verschlüsselungsalgorithmen wie AES (Advanced Encryption Standard) oder Bibliotheken verwenden, die Verschlüsselungsfunktionen anbieten. Bevor Sie sensible Daten speichern, verschlüsseln Sie sie mit einem sicheren Verschlüsselungsschlüssel. Beim Abrufen der Daten entschlüsseln Sie sie mit demselben Schlüssel.

Beispiel: Daten verschlüsseln und entschlüsseln

function encryptData(data, key) {
  // Implementieren Sie hier die Verschlüsselungslogik mit einer Bibliothek oder einem Algorithmus
  // Beispiel mit einer einfachen Substitutionschiffre
  const encryptedData = data.split('').map(char => String.fromCharCode(char.charCodeAt(0) + key)).join('');
  return encryptedData;
}

function decryptData(encryptedData, key) {
  // Implementieren Sie hier die Entschlüsselungslogik mit einer Bibliothek oder einem Algorithmus
  // Beispiel mit einer einfachen Substitutionschiffre
  const decryptedData = encryptedData.split('').map(char => String.fromCharCode(char.charCodeAt(0) - key)).join('');
  return decryptedData;
}

const sensitiveData = 'Geheime Daten';
const encryptionKey = 3;
const encryptedData = encryptData(sensitiveData, encryptionKey);
localStorage.setItem('sensitiveData', encryptedData);

// Abrufen und Entschlüsseln der Daten
const storedEncryptedData = localStorage.getItem('sensitiveData');
const decryptedData = decryptData(storedEncryptedData, encryptionKey);
console.log(decryptedData); // Ausgabe: 'Geheime Daten'

Es ist wichtig, einen sicheren Verschlüsselungsschlüssel zu wählen und ihn sicher aufzubewahren. Vermeiden Sie es, den Verschlüsselungsschlüssel am gleichen Ort wie die verschlüsselten Daten zu speichern, da dies den Zweck der Verschlüsselung zunichtemachen würde.

Seien Sie auch vorsichtig mit den Daten, die Sie im Web-Speicher ablegen. Vermeiden Sie es, hochsensible Informationen wie Passwörter, Kreditkartennummern oder persönliche Identifikationsnummern (PINs) im Web-Speicher zu speichern, selbst wenn sie verschlüsselt sind. Es ist im Allgemeinen sicherer, solche sensiblen Daten serverseitig zu speichern und sichere Kommunikationsprotokolle wie HTTPS zu verwenden, um die Daten zu übertragen.

Browser-Unterstützung und Einschränkungen

Web Storage (Local Storage und Session Storage) wird von modernen Webbrowsern unterstützt. Es ist jedoch wichtig, die Browser-Kompatibilität und Speichergrenzen zu kennen, wenn Sie Web Storage in Ihren Webanwendungen verwenden.

Die meisten modernen Browser, einschließlich Chrome, Firefox, Safari, Edge und Internet Explorer (ab Version 8), unterstützen Web Storage. Sie ermöglichen es Ihnen, Daten mithilfe der Objekte localStorage und sessionStorage ohne größere Probleme zu speichern und abzurufen.

Allerdings gibt es einige ältere Browser-Versionen oder weniger verbreitete Browser, die möglicherweise nur eingeschränkte oder keine Unterstützung für Web Storage bieten. Es ist ratsam, die Browser-Kompatibilität der Web Storage-Funktionen zu überprüfen, die Sie verwenden möchten. Sie können Online-Ressourcen wie Can I Use nutzen, um die Browser-Unterstützungsmatrix für Web Storage einzusehen.

Bei der Verwendung von Web Storage sollten Sie auch die Speichergrenzen und Kontingente kennen. Jeder Browser hat seine eigenen Speichergrenzen für Web Storage. Die genaue Grenze kann je nach Browser und Gerät variieren.

Browser Ungefähre Speichergrenze
Chrome 5MB pro Ursprung
Firefox 5MB pro Ursprung
Safari 5MB pro Ursprung
Internet Explorer 10MB pro Ursprung

Diese Grenzen gelten pro Ursprung, was bedeutet, dass jede Domain (oder Subdomain) ihr eigenes separates Speicherkontingent hat. Wenn Ihre Anwendung große Datenmengen speichern muss, sollten Sie den verfügbaren Speicherplatz überprüfen und Ausnahmen bei Speichergrenzen sorgfältig behandeln.

Um den verfügbaren Speicherplatz zu überprüfen, können Sie in modernen Browsern die StorageManager-API verwenden. Sie bietet Methoden wie estimate(), um eine Schätzung des verfügbaren Speicherplatzes zu erhalten.

Beispiel: Verfügbaren Speicherplatz überprüfen

if (navigator.storage && navigator.storage.estimate) {
  navigator.storage.estimate().then(({ usage, quota }) => {
    console.log(`${usage} von ${quota} Bytes werden verwendet.`);
  });
} else {
  console.log('StorageManager API wird nicht unterstützt.');
}

Wenn Sie versuchen, Daten zu speichern, die das verfügbare Speicherkontingent überschreiten, wird ein QuotaExceededError ausgelöst. Sie sollten diesen Fehler abfangen und behandeln, um eine Alternative anzubieten oder den Benutzer zu benachrichtigen.

Beispiel: Behandlung von Speichergrenzausnahmen

try {
  localStorage.setItem('schlüssel', 'wert');
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.log('Speichergrenze überschritten. Es können keine weiteren Daten gespeichert werden.');
    // Fehler behandeln, z.B. durch Entfernen ungenutzter Daten oder Benachrichtigung des Benutzers
  } else {
    console.log('Beim Speichern der Daten ist ein Fehler aufgetreten:', e);
  }
}

Bei der Handhabung von Speichergrenzen können Sie Strategien wie Datenkompression, selektive Datenspeicherung oder die Verwendung serverseitiger Speicherung für größere Datensätze in Betracht ziehen. Es ist auch gut, regelmäßig unnötige Daten aus dem Web Storage zu entfernen, um Platz freizugeben.

Beachten Sie, dass Web Storage browserspezifisch ist. Daten, die in einem Browser gespeichert sind, sind in einem anderen Browser oder auf einem anderen Gerät nicht verfügbar. Wenn Sie Daten speichern müssen, die über verschiedene Browser oder Geräte hinweg verfügbar sein sollen, sollten Sie andere Speicheroptionen wie serverseitige Speicherung oder Cloud-Speicherlösungen in Betracht ziehen.

Praktische Beispiele und Anwendungsfälle

Web Storage (Local Storage und Session Storage) hat viele Anwendungen in der Webentwicklung. Hier sind einige gängige Beispiele und Anwendungsfälle, bei denen Web Storage die Benutzererfahrung und Anwendungsfunktionalität verbessern kann.

Speichern von Benutzereinstellungen und -präferenzen

Web Storage ist eine Möglichkeit, Benutzereinstellungen und -präferenzen zu speichern. Sie können Local Storage verwenden, um Dinge wie die bevorzugte Sprache, das Theme oder Layout-Auswahlen des Benutzers zu speichern. Dies ermöglicht es, die Einstellungen des Benutzers auch dann beizubehalten, wenn er die Website verlässt und später zurückkehrt.

Beispiel: Speichern von Benutzereinstellungen und -präferenzen

// Benutzer-Theme-Präferenz setzen
function setTheme(theme) {
  localStorage.setItem('theme', theme);
  applyTheme(theme);
}

// Ausgewähltes Theme anwenden
function applyTheme(theme) {
  document.body.className = theme;
}

// Benutzer-Theme-Präferenz beim Laden der Seite abrufen
window.addEventListener('load', function() {
  const storedTheme = localStorage.getItem('theme');
  if (storedTheme) {
    applyTheme(storedTheme);
  }
});

Die Funktion setTheme() speichert das vom Benutzer ausgewählte Theme im Local Storage. Die Funktion applyTheme() wendet das Theme auf die Seite an, indem sie den Klassennamen des <body>-Elements setzt. Beim Laden der Seite wird geprüft, ob eine Theme-Präferenz gespeichert ist, und diese gegebenenfalls angewendet.

Zwischenspeichern von Daten für Offline-Zugriff

Web Storage kann Daten für den Offline-Zugriff zwischenspeichern. Wenn Ihre Webanwendung offline oder in Situationen mit schlechter Internetverbindung funktionieren muss, können Sie Daten im Local Storage speichern. Dies ermöglicht es der Anwendung, auch dann zu funktionieren, wenn der Benutzer nicht mit dem Internet verbunden ist.

Beispiel: Zwischenspeichern von Daten für Offline-Zugriff

// Daten im Local Storage zwischenspeichern
function cacheData(data) {
  localStorage.setItem('cachedData', JSON.stringify(data));
}

// Zwischengespeicherte Daten aus dem Local Storage abrufen
function getCachedData() {
  const cachedData = localStorage.getItem('cachedData');
  return cachedData ? JSON.parse(cachedData) : null;
}

// Daten vom Server abrufen
function fetchDataFromServer() {
  // API-Anfrage zum Abrufen von Daten
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      // Abgerufene Daten zwischenspeichern
      cacheData(data);
      // Daten in der Anwendung verwenden
      displayData(data);
    })
    .catch(error => {
      console.log('Fehler beim Abrufen der Daten:', error);
      // Zwischengespeicherte Daten als Fallback abrufen
      const cachedData = getCachedData();
      if (cachedData) {
        displayData(cachedData);
      } else {
        console.log('Keine zwischengespeicherten Daten verfügbar.');
      }
    });
}

Die Funktion cacheData() speichert die abgerufenen Daten im Local Storage. Die Funktion getCachedData() ruft die zwischengespeicherten Daten aus dem Local Storage ab. Wenn die Anwendung keine Daten vom Server abrufen kann (z.B. aufgrund eines Netzwerkfehlers), greift sie auf die zwischengespeicherten Daten zurück, falls verfügbar.

Implementierung von Warenkorb-Funktionalität

Web Storage kann zur Implementierung von Warenkorb-Funktionalität in E-Commerce-Anwendungen verwendet werden. Sie können Session Storage verwenden, um die vom Benutzer ausgewählten Produkte und Mengen während des Browsens auf der Website zu speichern. Dies ermöglicht es, den Warenkorb intakt zu halten, auch wenn der Benutzer die Seite verlässt oder den Browser-Tab schließt.

Beispiel: Implementierung von Warenkorb-Funktionalität

// Ein Produkt zum Warenkorb hinzufügen
function addToCart(product) {
  let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
  cart.push(product);
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

// Ein Produkt aus dem Warenkorb entfernen
function removeFromCart(productId) {
  let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
  cart = cart.filter(product => product.id !== productId);
  sessionStorage.setItem('cart', JSON.stringify(cart));
}

// Aktuellen Inhalt des Warenkorbs abrufen
function getCartContents() {
  return JSON.parse(sessionStorage.getItem('cart')) || [];
}

Die Funktion addToCart() fügt ein Produkt zum Warenkorb hinzu, der im Session Storage gespeichert ist. Die Funktion removeFromCart() entfernt ein Produkt aus dem Warenkorb basierend auf seiner ID. Die Funktion getCartContents() ruft den aktuellen Inhalt des Warenkorbs ab.

Temporäres Speichern von Formulardaten

Web Storage kann zum temporären Speichern von Formulardaten verwendet werden. Wenn ein Benutzer ein langes Formular ausfüllt und versehentlich den Browser schließt oder die Seite verlässt, können Sie Session Storage verwenden, um den Fortschritt zu speichern. Wenn der Benutzer zum Formular zurückkehrt, können Sie die gespeicherten Daten wiederherstellen und ihm ermöglichen, dort fortzufahren, wo er aufgehört hat.

Beispiel: Temporäres Speichern von Formulardaten

// Formulardaten im Session Storage speichern
function saveFormData() {
  const form = document.querySelector('form');
  const formData = new FormData(form);
  sessionStorage.setItem('formData', JSON.stringify(Object.fromEntries(formData)));
}

// Formulardaten aus dem Session Storage laden
function loadFormData() {
  const savedData = sessionStorage.getItem('formData');
  if (savedData) {
    const formData = JSON.parse(savedData);
    const form = document.querySelector('form');
    Object.keys(formData).forEach(key => {
      const field = form.elements[key];
      if (field) {
        field.value = formData[key];
      }
    });
  }
}

// Formulardaten bei Änderung eines Eingabefelds speichern
document.querySelector('form').addEventListener('input', saveFormData);

// Formulardaten beim Laden der Seite laden
window.addEventListener('load', loadFormData);

Die Funktion saveFormData() speichert die Formulardaten im Session Storage, wann immer sich ein Eingabefeld ändert. Die Funktion loadFormData() lädt die gespeicherten Formulardaten aus dem Session Storage, wenn die Seite geladen wird, und füllt die Formularfelder mit den zuvor eingegebenen Werten aus.

Dies sind einige Beispiele dafür, wie Web Storage in praktischen Szenarien eingesetzt werden kann. Web Storage bietet eine einfache Möglichkeit, Daten auf der Client-Seite zu speichern und ermöglicht verschiedene Funktionen und Verbesserungen in Webanwendungen. Es bietet eine Lösung zur Verbesserung der Benutzererfahrung und Funktionalität Ihrer Webanwendungen.