javascript / intermediate
Snippet
Eigener Hook: useLocalStorage
Dieser benutzerdefinierte Hook synchronisiert eine React-State-Variable mit dem localStorage des Browsers und stellt so die Datenerhaltung nach dem Neuladen der Seite sicher.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function useLocalStorage(key, initialValue) {const [storedValue, setStoredValue] = useState(() => {try {const item = window.localStorage.getItem(key);return item ? JSON.parse(item) : initialValue;} catch (error) {return initialValue;}});const setValue = (value) => {const valueToStore = value instanceof Function ? value(storedValue) : value;setStoredValue(valueToStore);window.localStorage.setItem(key, JSON.stringify(valueToStore));};return [storedValue, setValue];}
react
Erklärung
1
useState(() => { ... })
Lazy Initialization, um beim ersten Rendern einmalig aus dem localStorage zu lesen.
2
JSON.parse(item)
Wandelt den gespeicherten String zurück in ein JavaScript-Objekt/Wert um.
3
window.localStorage.setItem(key, ...)
Aktualisiert den Browser-Speicher, wann immer sich der State ändert.