Wie kann ich eine lokale Speicherung der zuletzt abgerufenen Wetterdaten realisieren?
- Vorgehen mit localStorage
- Beispielhafte Umsetzung in JavaScript
- Wichtige Hinweise
- Zusätzliche Technologien
Um Wetterdaten, die von einem Webdienst oder einer API abgerufen werden, lokal im Browser zu speichern,
gibt es verschiedene Ansätze. Besonders gebräuchlich und einfach umzusetzen ist die Nutzung des Web Storage APIs,
konkret des localStorage. Dieses erlaubt es, Daten als Schlüssel-Wert-Paare dauerhaft im Browser zu speichern,
sodass sie auch nach einem Seitenreload oder einem Schließen und erneuten Öffnen des Browsers erhalten bleiben.
Vorgehen mit localStorage
Nachdem du die Wetterdaten über eine API wie etwa OpenWeatherMap oder eine andere Quelle abgerufen hast,
kannst du diese Daten in Form eines JSON-Strings im localStorage abspeichern. Hierfür solltest du
die Daten zuvor in ein JSON-Format umwandeln, da localStorage nur Strings speichern kann.
Beim nächsten Zugriff auf die Seite kannst du dann überprüfen, ob bereits lokale Wetterdaten vorhanden sind,
Beispielhafte Umsetzung in JavaScript
Angenommen, du hast eine Funktion fetchWeather(), die die aktuellen Wetterdaten von einem Server holt.
Nach erfolgreichem Abruf speicherst du die Daten mit localStorage.setItem(). Beim Laden der Seite prüfst du
mit localStorage.getItem(), ob bereits Daten vorliegen, und nutzt diese dann zur Anzeige. So können z.B. auch
Zeitstempel oder Ablaufdaten mitgespeichert werden, um veraltete Daten zu erkennen und bei Bedarf neu abzurufen.
Wichtige Hinweise
Beachte, dass localStorage hinsichtlich Speicherplatz limitiert ist (meist um die 5 MB pro Domain) und nur Strings speichern kann.
Für komplexere Szenarien, wie das Speichern größerer oder strukturierter Datenmengen, ist alternativ die IndexedDB eine Möglichkeit,
die allerdings komplizierter in der Handhabung ist. Ebenso kann es sinnvoll sein, die lokalen Daten mit einem Zeitstempel zu versehen,
um beim nächsten Zugriff entscheiden zu können, ob sie noch aktuell sind oder neu abgerufen werden sollten.
Zusätzliche Technologien
Neben localStorage gibt es auch sessionStorage, das ähnlich funktioniert, jedoch die Daten nur bis zum Schließen des Browser-Tabs speichert.
Für persistente Speicherung ist deshalb localStorage besser geeignet. Falls du eine App entwickelst, kannst du alternativ auch lokale Datenbanken wie SQLite nutzen.