Чтобы создать этот пользовательский интерфейс, мы сначала рассмотрим основы работы с локальным хранилищем. Затем мы посмотрим, как подключить это к React, используя useState хук (и без useEffect!).

Основы local storage

Local storage это способ сохранить информацию на компьютере пользователя. Данные, которые вы сохраняете в локальном хранилище, сохраняются в течение долгого времени, в отличие, например, от session storage, которое очищается, когда пользователь закрывает вкладку браузера.

Local storage это хранилище ключ-значение. Значения хранятся в виде строк.

Методы для получения данных из хранилища:

localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.removeItem(key);

Сохранение списка задач

Разобравшись с работой хранилища, давайте решим, как хранить список дел.

Поскольку значения должны храниться в виде строк, нам нужно будет преобразовать наш массив Javascript в строку JSON (этот процесс называется серриализацией - преобразование объекта в строку). Мы можем сделать это с помощью JSON.stringify. Затем, прежде чем считывать значение из локального хранилища, мы можем десериализовать (преобразовать его обратно из строки в объект) его с помощью JSON.parse.

const todoList = [
    { id: 1, text: ‘Wash dishes’ },
    { id: 2, text: ‘Buy milk }
];
localStorage.setItem(‘todoList’, JSON.stringify(todoList));
const saved = JSON.parse(localStorage.getItm(‘todoList’));

Подключение к React

Чтобы понять, какие хуки нам нужны для этого, полезно кратко изложить все, что должно произойти:

1. При отображении списка задач, если в локальном хранилище уже есть значение, мы должны использовать его; в противном случае оно должно быть инициализировано пустым массивом
2. Всякий раз, когда добавляется / редактируется / удаляется новая задача, мы должны обновлять значение локального хранилища

Инициализация

Список задач сохраняется в состоянии компонента с помощью useState хука, который поддерживает начальное значение в качестве параметра. Таким образом, для инициализации списка задач мы можем использовать следующее выражение: