Die API localStorage verwenden

Dieser Quellcode zeigt dir, wie du die API localStorage verwendest, um Daten aus deiner Webseite dauerhaft auf deinem Computer zu speichern. So bleibt die Aufgabenliste von Professor Bairstone erhalten, auch wenn man den Browser schließt oder den Computer ausschaltet. In diesem HTML-Dokument haben wir zwei Buttons zum Laden und Speichern von Daten definiert.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Aufgabenliste-App</title>
    <script>
       function speichern() {
          var neueAufgabe = document.getElementById("Feld").value;
          localStorage.Feld = neueAufgabe;
       }
       function laden() {
          var gespeichertesDiv = document.getElementById("gespeicherteListe");
          gespeichertesDiv.innerHTML = localStorage.Feld;
       }

    </script>
</head>
<body>
   <input type="text" id="Feld" value="Aufgabe eintippen"/><br/>
   <input type="button" id="Speichern" value="Speichern" onclick="speichern();"/><br/>
   <input type="button" id="Laden" value="Laden" onclick="laden();"/><br/>
   Gespeicherte Aufgabe: <div id="gespeicherteListe"></div>  
</body>
</html>

Beispiel ansehen

Zurück zur Mission