Робота з LocalStorage у react
У додатках часто виникає задача зберігання значень у локальному сховищі, таких як обрані фільтри, вподобання теми і т. д.
Запис
- збережемо кількість кліків між перезавантаженнями сторінки. Кожного разу, коли змінюється значення стану clicks, компонент оновлюється, і ми можемо записати ефект.
- У ефекті додаємо код запису в локальне сховище. Ключ - це довільний рядок, наприклад, «saved-clicks», а значення - це стан clicks.
const App = () => { const [clicks, setClicks] = useState(0); useEffect(() => { window.localStorage.setItem("saved-clicks", clicks); }, [clicks]); return ( <div> <button onClick={() => setClicks(clicks + 1)}> You clicked {clicks} times </button> <button onClick={() => setClicks(0)}>Reset</button> </div> ); };
Читання
Щоб прочитати значення з локального сховища, нам знадобиться не ефект, а щось цікавіше. Справа в тому, що ефекти виконуються асинхронно, після монтування компонента. Але нам потрібно синхронно прочитати значення з локального сховища, ще до монтування. Розберемося, як це зробити. Ми вже знаємо, що в хук useState можна передати початкове значення стану.
const [clicks, setClicks] = useState(() => { // Зчитуємо значення за ключем const savedClicks = window.localStorage.getItem("saved-clicks"); // Якщо там щось є, повертаємо це // значення як початкове значення стану if (savedClicks !== null) { return savedClicks; } // У протилежному випадку повертаємо // яке-небудь значення за замовчуванням return 0; });