Робота з 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;
});