Lokaler Speicher ist ein nützliches Webentwicklungstool, das es Entwicklern ermöglicht, Daten im Browser des Benutzers zu speichern. In diesem Artikel befassen wir uns mit verschiedenen Funktionen des lokalen Speichers, beginnend mit Beispielen für Anfänger bis hin zu komplexeren Techniken. Am Ende dieses Leitfadens verfügen Sie über ein grundlegendes Verständnis für die erfolgreiche Verwendung von lokalem Speicher in Webanwendungen.

Beispiele für Anfänger zum lokalen Speicher

1. Benutzereinstellungen speichern:

    
    
    



    Choose a theme:
    
        Light
        Dark
        Medium
    
    Save Preference

    

Wenn der Benutzer ein Thema auswählt und auf die Schaltfläche „Einstellungen speichern“ klickt, protokolliert dieser Code das Thema in der Konsole. Um dieses Protokoll zu lesen, öffnen Sie die Entwicklertools des Browsers (normalerweise indem Sie F12 drücken oder mit der rechten Maustaste auf die Seite klicken und „Inspizieren“ auswählen) und gehen Sie zur Registerkarte „Konsole“. (Weiterlesen)

2. Benutzereingaben speichern:

    
    
    



    
    Save Input

    

Dieses HTML-Beispiel generiert eine einfache Webseite, die es Benutzern ermöglicht, Text in ein Textfeld einzugeben und ihn im lokalen Speicher ihres Browsers zu speichern.

Wenn ein Benutzer Text in das Eingabefeld eingibt und auf die Schaltfläche „Eingabe speichern“ klickt, wird der Text im lokalen Speicher des Browsers gespeichert. Dies bedeutet, dass die gespeicherten Eingaben auch dann zugänglich bleiben, wenn Benutzer die Website aktualisieren oder den Browser schließen und erneut öffnen. Das Konsolenprotokoll und die Warnung informieren den Benutzer darüber, dass seine Eingabe erfolgreich gespeichert wurde. (Mehr lesen)

3. Warenkorbpersistenz:

    
    
    



    
Shopping Cart
    

Dieses Beispiel zeigt, wie Sie einen Warenkorb mithilfe des lokalen Speichers speichern. Dem Warenkorb hinzugefügte Artikel werden als Array im lokalen Speicher unter dem Schlüssel „Warenkorb“ gespeichert. Wenn die Seite geladen wird, werden die gespeicherten Warenkorbartikel aus dem lokalen Speicher abgerufen und angezeigt.

Wenn Sie auf eine der Schaltflächen „Artikel X zum Warenkorb hinzufügen“ klicken, wird der entsprechende Artikel zum Warenkorb hinzugefügt und der aktualisierte Warenkorbinhalt wird in der Konsole angezeigt. Um diese Protokolle zu überprüfen, öffnen Sie die Entwicklertools des Browsers (normalerweise indem Sie F12 drücken oder mit der rechten Maustaste auf die Seite klicken und „Inspizieren“ auswählen) und gehen Sie zur Registerkarte „Konsole“.

Sie können den lokalen Speicher auch direkt über die Entwicklertools des Browsers anzeigen. Bei den meisten Browsern können Sie dies tun, indem Sie mit der rechten Maustaste auf die Seite klicken, „Inspizieren“ auswählen, um die Entwicklertools zu erhalten, und dann zur Registerkarte „Anwendung“ oder „Speicher“ navigieren. Erweitern Sie von dort aus den Abschnitt „Lokaler Speicher“, um die Schlüssel-Wert-Paare der Website anzuzeigen. In diesem Beispiel enthält der Schlüssel „cart“ die JSON-Zeichenfolge, die die gespeicherten Warenkorbartikel darstellt.
Vollständigen Artikel lesen – Lokalen Speicher in der Webentwicklung beherrschen: 8 praktische Beispiele, vom Anfänger bis zum Experten!

Json lernen – Klicken Sie hier