Когда мы закончили с последней частью, мы смогли добавить новый контакт, который отображался, но исчезал при обновлении страницы. Теперь нам нужно сохранить новые контактные данные в localStorage, чтобы мы могли сохранять данные.
Чтобы использовать localStorage, мы собираемся реализовать еще один хук React под названием useEffect(). Хук Effect позволяет выполнять побочные эффекты в функциональных компонентах. Поэтому, когда происходит обновление, это поможет нам снова отобразить данные.
Итак, теперь с контактами в качестве зависимости давайте создадим функцию useEffect в App.js:
import React, { useState, useEffect } from 'react';
...
useEffect(( => {
localStorage.setItem();
}, [contacts]);
И создайте ключ для setItem:
const LOCAL_STORAGE_KEY = "contacts";
Добавление ключа в setItem и JSON.stringing контактов:
useEffect(( => {
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(contacts);
}, [contacts]);
Теперь мы хотим получать данные из localStorage при обновлении страницы и отображать их.
На этот раз с использованием другой функции useEffect с getItem. Также установка localStorage в качестве переменной после получения данных:
useEffect(( => {
const getContacts = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY));
if (getContacts) setContacts(getContacts);
},[]};
После добавления наших функций-ловушек useEffect для обработки сохранения данных в localStorage теперь вы можете добавить новый контакт, обновить страницу, и вы по-прежнему будете видеть контакты. Если вы посмотрите на вкладку приложения ваших инструментов разработки и заглянете на вкладку localStorage, вы увидите, что данные сохраняются. Это все для этого приложения! (на данный момент) Поскольку я могу переключиться на другой проект React, о котором я думал некоторое время. В любом случае, до следующего раза! Удачного кодирования!
