Как сохранить данные формы пользователя в localStorage и получить их
При разработке легковесных приложений нам следует избегать использования базы данных, в этом случае мы можем использовать localStorage или сессии. В этом блоге я покажу, как получить пользовательские данные из форму и сохраните (и извлеките!) ее в localStorage.
- Что такое LocalStorage?
👉🏻 LocalStorage — это объект, который позволяет сайтам и приложениям JavaScript сохранять пары «ключ-значение» в веб-браузере, которые могут выдерживать обновление страниц и перезапуск браузера. Он имеет встроенные методы, такие как — setItem(), getItem(), RemoveItem(), Clear(). Думаю, то, что делают эти методы, самоочевидно.
2. Сохранение данных Пользователя в нашем localStorage.
👉🏻 Давайте напишем код для получения введенных пользователем данных через форму и сохранения их в нашем локальном хранилище. Кроме того, давайте отображать значения по клику. Найдите ссылку на код здесь. Давайте разберем код шаг за шагом 👇🏽
3. Создайте простую форму для получения введенных пользователем данных и сохраните ее в нашей переменной состояния. В моем примере я обновляю свое имя, адрес электронной почты и номер данными пользователя и handleSubmission для обработки пользовательских данных, см. фрагмент ниже 👇🏽
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [number, setNumber] = useState("");
<label htmlFor="name"> Name </label>
<input
type="text"
name="email"
placeholder="Type your name"
onChange={(e) => setName(e.target.value)}
value={editData ?name : ''}
/>
<label htmlFor="email"> Email </label>
<input
type="email"
name="email"
placeholder="Type your email"
onChange={(e) => setEmail(e.target.value)}
value={editData ? email : ''}
/>
<label htmlFor="number"> Number </label>
<input
type="number"
name="num"
placeholder="Type your number"
onChange={(e) => setNumber(e.target.value)}
value={editData ? number :''}
/>
<button onClick={handleSubmission}>Store my data</button>
Теперь, когда у нас есть данные, мы сохраним их в локальном хранилище и перезагрузим страницу. Сначала я очистил свое локальное хранилище, поэтому, даже если в ключе «userInfo» уже есть какие-то другие данные, они будут удалены.
function handleSubmission() {
localStorage.clear();
let userData = {
Name: name,
Email: email,
Number: number,
};
localStorage.setItem("userInfo", JSON.stringify(userData));
alert("Data recorded!");
window.location.reload();
}
› Что такое JSON.stringify() 🙄 — это метод преобразования объекта или значения JS в JSON, который обычно используется, когда вы хотите сохранить данные в формате, который можно легко сохранить в диск или отправлен по сети. В нашем примере объект userData преобразуется в строку, поскольку данные, хранящиеся в локальном хранилище, могут храниться только в строках.
› Получение пользовательских данных из локального хранилища. Это довольно просто, в localStorage есть разные методы, один из которых — .get(). Я сохранил свои данные в переменной userInfo и обновил состояния для доступа к ним в моем JSX. См. фрагмент ниже 👇🏽
let userInfo = "";
function toggleGetData() {
setData(true);
userInfo = JSON.parse(localStorage.getItem("userInfo"));
setName(userInfo.Name);
setEmail(userInfo.Email);
setNumber(userInfo.Number);
}
// displaying my data from the localStorage on click
{data && (
<>
<div className="data">
<div> Name - {name}</div>
<div> Email - {email}</div>
<div> Number - {number}</div>
</div>
</>
)}
Совет: всегда не забывайте анализировать строку, которую мы получаем из локального хранилища, иначе мы не сможем получить доступ к отдельным ключам!
Вот и все, ребята! Доступ ко всему коду здесь — код
Я публикую 2 блога в неделю о JavaScript и React, исходя из собственного опыта разработки. Посмотрите другие мои блоги здесь — Радхика. Ставьте лайк, делитесь и подписывайтесь, чтобы узнать больше💃🏽
