Browser APIs
Der Browser stellt APIs bereit: Speicher, Timer, Standort der Seite und mehr. localStorage ist die bekannteste.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
localStorage
localStorage speichert Strings dauerhaft im Browser — auch nach dem Schließen des Tabs.
Objekte werden mit JSON.stringify gespeichert und mit JSON.parse gelesen.
Genau so merkt sich diese Lernplattform Theme, Sprache und Geräte-ID.
localStorage.setItem('theme', 'dark');
localStorage.getItem('theme'); // 'dark'
const profil = { name: 'Ada' };
localStorage.setItem('profil', JSON.stringify(profil));
JSON.parse(localStorage.getItem('profil'));Timer
setTimeout führt eine Funktion einmal nach einer Wartezeit aus.
setInterval wiederholt sie in festen Abständen. clearTimeout und clearInterval stoppen Timer.
const id = setTimeout(() => {
console.log('3 Sekunden vorbei');
}, 3000);
clearTimeout(id); // abbrechenwindow und Freunde
window ist das globale Objekt des Browsers.
location liefert die URL und kann navigieren, navigator beschreibt den Browser, history steuert den Verlauf.
Vertiefung
localStorage, Timer und Lebensdauer
localStorage speichert Strings dauerhaft im Browser. Objekte müssen mit JSON.stringify serialisiert und mit JSON.parse gelesen werden. Es gibt keine automatische Synchronisierung zwischen Tabs.
Timer planen Arbeit, führen sie aber nicht sofort aus. setTimeout läuft nach der aktuellen Aufgabe; clearTimeout verhindert die Ausführung.
const profil = { theme: "dark", xp: 10 };
localStorage.setItem("profil", JSON.stringify(profil));
const geladen = JSON.parse(localStorage.getItem("profil") ?? "{}");
console.log(geladen.xp);Merksatz: localStorage ist synchron und textbasiert. Immer JSON.parse mit einem sicheren Fallback verwenden.
Übungsaufgabe
Theme-Speicher
Speichere das Theme in localStorage und lies es beim Start wieder ein. Wenn nichts gespeichert ist, verwende „dark“. Zeige das Ergebnis nach einem kurzen Timeout.
Das soll dein Programm können
- JSON.stringify und JSON.parse
- Fallback mit ??
- setTimeout verwenden
- Theme in der Konsole ausgeben
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
JSON.parse braucht einen gültigen String. Nutze ?? und ein try/catch, wenn du unsichere Daten erwartest.
Lösung anzeigen
const gespeichert = localStorage.getItem("theme");
const theme = gespeichert ? JSON.parse(gespeichert) : "dark";
localStorage.setItem("theme", JSON.stringify(theme));
setTimeout(() => {
console.log(`Aktives Theme: ${theme}`);
}, 500);Warum funktioniert das?
Der Fallback greift, wenn kein Wert existiert. setTimeout verschiebt die Ausgabe, blockiert aber nicht den Rest des Programms.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Der Lernzähler
Baue einen kleinen Zähler, der bei jedem Klick hochzählt und den Wert im DOM anzeigt. Erweitere ihn um einen Reset-Button.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.