Итак, все же, если вы думаете, что сомнения есть там, где они были, давайте разберемся в этом подробнее ниже.
Ниже приведены два примера для понимания.
Пример: 1
import React, { useState, useEffect } from 'react';
function App() {
const [text, setText] = useState('');
useEffect(() => {
const storedText = localStorage.getItem('userInput');
if (storedText) {
setText(storedText);
}
}, []);
const handleTextChange = (e) => {
const value = e.target.value;
setText(value);
localStorage.setItem('userInput', value);
};
return (
<div>
<input type="text" value={text} onChange={handleTextChange} />
<p>{text}</p>
</div>
);
}
export default App;
В этом примере у нас есть простое поле ввода текста и элемент абзаца, который отображает ввод пользователя. Мы используем хук useState для создания текста переменной состояния и функцию setText для ее обновления.
Мы также используем хук useEffect для извлечения сохраненного текста из локального хранилища при монтировании компонента. Метод getItem используется для извлечения данных из локального хранилища с использованием ключа userInput.
В функции handleTextChange мы обновляем текст переменной состояния с помощью нового пользовательского ввода, а затем сохраняем его в локальном хранилище с помощью метода setItem.
Всякий раз, когда пользователь вводит что-то в поле ввода, вызывается функция handleTextChange, которая обновляет состояние и сохраняет новое значение в локальном хранилище.
Наконец, мы визуализируем поле ввода и элемент абзаца, при этом значение поля ввода устанавливается в переменную состояния текста, а элемент абзаца отображает текущее значение переменной состояния текста.
В этом примере показано, как использовать локальное хранилище в React для хранения и извлечения данных, введенных пользователем, даже после перезагрузки страницы. Используя локальное хранилище, мы можем сохранять пользовательские настройки и настройки, хранить данные приложений и улучшать взаимодействие с пользователем.
Пример: 2
import React, { useState, useEffect } from 'react';
function Counter() {
const [count, setCount] = useState(0);
// This effect runs only once on mount to retrieve the initial count from local storage
useEffect(() => {
const storedCount = localStorage.getItem('count');
if (storedCount) {
setCount(parseInt(storedCount));
}
}, []);
// This effect runs every time the count state changes to update the local storage value
useEffect(() => {
localStorage.setItem('count', count.toString());
}, [count]);
const incrementCount = () => {
setCount(count + 1);
};
const decrementCount = () => {
setCount(count - 1);
};
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={incrementCount}>Increment</button>
<button onClick={decrementCount}>Decrement</button>
</div>
);
}
export default Counter;
В этом примере мы определяем компонент Counter, который использует хук useState для поддержки переменной состояния счетчика и хук useEffect для синхронизации счетчика с локальным хранилищем.
При монтировании мы используем первый хук useEffect для извлечения начального значения счетчика из локального хранилища (если оно существует) и устанавливаем его в качестве начального значения состояния. Это гарантирует, что значение счетчика сохраняется, даже если пользователь обновляет страницу или уходит, а затем возвращается.
Затем мы используем второй хук useEffect для прослушивания изменений в переменной состояния count и соответствующим образом обновляем значение локального хранилища. Это гарантирует постоянную синхронизацию значения счетчика с локальным хранилищем.
Наконец, мы определяем две вспомогательные функции для увеличения и уменьшения счетчика, которые обновляют переменную состояния счетчика при вызове. Эти функции привязаны к кнопкам в методе рендеринга компонента.
В целом, этот пример демонстрирует, как можно использовать локальное хранилище для создания более сложных приложений с отслеживанием состояния в React, которые сохраняют пользовательские данные даже между сеансами браузера.
Пример : 3
Данные формы будут храниться в LocalStorage
import React, { useState } from "react";
const MyForm = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [phone, setPhone] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
const formData = { name, email, phone };
localStorage.setItem("formData", JSON.stringify(formData));
alert("Form data saved to local storage!");
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<label>
Email:
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</label>
<label>
Phone:
<input
type="tel"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
</label>
<button type="submit">Save to Local Storage</button>
</form>
);
};
export default MyForm;
Форма :
Как только мы нажмем Сохранить в локальном хранилище
ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ:
- Если я закрою браузер и снова перезапущу компьютер, данные останутся в локальном хранилище?
Ответ: Да, если вы закроете браузер и перезагрузите компьютер, данные локального хранилища останутся там, если веб-сайт/приложение не удалили данные и вы не очистили данные своего браузера. Данные локального хранилища хранятся на компьютере пользователя, поэтому они сохраняются в сеансах браузера и даже при перезагрузке компьютера.
2. Сколько времени локальное хранилище будет хранить значение?
Ответ: Значения в локальном хранилище сохраняются до тех пор, пока веб-сайт/приложение не удалит их явным образом или пока пользователь не очистит данные браузера, для значения локального хранилища не установлено время истечения срока действия.
3. Когда мне следует использовать локальное хранилище в моем реагирующем приложении?
Ответ: Локальное хранилище может быть полезно для сохранения пользовательских данных или состояния приложения при перезагрузке страницы или после закрытия браузера. Его также можно использовать для кэширования данных, получение которых с сервера требует больших затрат, таких как большие изображения или видеофайлы.
4. Какие типы данных я храню в локальном хранилище?
Ответ: Локальное хранилище может хранить данные только в виде строк, поэтому вам нужно будет преобразовать любые нестроковые данные (такие как объекты или массивы) в строку, используя «JSON.stringify()», прежде чем сохранять их в локальном хранилище. Затем вы можете использовать «JSON.prase()», чтобы преобразовать строку обратно в исходный тип данных при извлечении ее из локального хранилища.
___________________________Спасибо_____________________________
Если вам понравилось читать этот блог, поделитесь им с друзьями и не забудьте подписаться на наш канал YouTube, чтобы получать больше интересного контента. Помогите нам рассказать о нашем опыте в разработке стека MERN, облачных вычислениях, React Native и Next.js, и следите за новостями, чтобы не пропустить новые информативные статьи. Вместе мы можем покорить мир технологий!
В разделе Проекты Mern Stack вы можете найти учебные пособия, советы, шпаргалки и другие проекты. Наши выступления также посвящены платформам React Framework, таким как NextJs и AWS Cloud. Присоединяйтесь к нам сегодня, чтобы не отставать от новейших технологий.🩷
📠 🏅:- Проекты Mern Stack
🎦 🥇:- Дневник Джары — YouTube 🚦
🎦 🥈 :- Эррормания — YouTube 🚦
На GITHUB:- raj-28 (Raj) (github.com)
💌 Подпишитесь на нашу рассылку, чтобы быть в курсе всех новых блогов 👍
…………🚦…🛣… ……………🚧🛑………………..▶……………….️
Используйте смайлики отсюда, если вам нужны….🚦🛣️🥇🥈🥉🏅🎖️🎦👍
