Угловой
Как хранить данные JSON в локальном хранилище — JS, React, Angular
Узнайте, как хранить данные в localStorage в JavaScript, React или Angular.
Вы можете сохранить некоторые данные (около 5 МБ, но проверьте здесь) в браузере, используя объект localStorage или sessionStorage.
Используя объект localStorage
, данные, хранящиеся в браузере, не имеют срока действия.
Однако вы должны помнить, что просмотр с использованием сеанса инкогнито очистит данные, когда будет закрыта последняя приватная вкладка.
В этом посте не рассматриваются различия между localStorage и sessionStorage, но знать их полезно.
Хранить данные в LocalStorage — JavaScript
Это то что тебе нужно знать.
Вы можете сохранить данные в localStorage
, используя следующий синтаксис
localStorage.setItem(variableKey, variableValue);
Это нормально, когда variableValue
— простая строка, но это не сработает для более сложных структур, таких как объекты. Когда у вас есть объекты или данные JSON, вам нужно будет использовать метод JSON.stringify()
.
Хранить данные JSON
Вот пример, когда мы сохраняем объект в хранилище.
// Create an object const userData = { job: "Programmer", skills: [ { id: 4200, name: "Angular" }, { id: 3000, name: "React" }, { id: 8080, name: "Vue" }, ], }; // Store the object into storage localStorage.setItem("userData", JSON.stringify(userData));
Чтение данных JSON
Как узнать, работает ли это? Пытаясь прочитать данные, которые вы только что сохранили.
// Retrieve the object from the storage const data = localStorage.getItem("userData"); console.log("data: ", JSON.parse(data));
Обратите внимание, что использование метода JSON.parse()
не всегда необходимо! Если вы просто хотите проверить, что находится внутри хранилища, вы можете просто войти в data
.
Удалить данные JSON
Наконец, вы можете удалить данные из localStorage
.
Есть два пути: removeItem()
и clear()
.
Используя removeItem()
, вы удаляете только значения, связанные с ключом, который вы передаете, например. 'userData'
в примере ниже.
localStorage.removeItem('userData');
Используя clear()
, вы удалите все в области localStorage
, связанной с используемым вами приложением.
localStorage.clear();
Точнее было бы сказать, что он удаляет данные в области localStorage
, связанной с URL-адресом. Читайте дальше, чтобы понять больше.
Хорошо знать
Как сообщается на MDN, localStorage
данные относятся к протоколу документа.
Что это значит?
Это означает, что для каждого URL-адреса браузер, скорее всего, создаст новую «корзину», в которой будут храниться данные.
Скажем, вы работаете с HTML и JS на своем ноутбуке. Когда вы открываете HTML-файл в браузере, URL-адрес будет выглядеть примерно так:
file:///C:/Users/John/webProjects/appName/localStorage.html
Согласно MDN, во всех современных браузерах localStorage
возвращает разные объекты для каждого file:
URL. Другими словами, каждый URL-адрес file:
имеет свою собственную уникальную локальную область хранения. Но никаких гарантий относительно такого поведения нет, поэтому на него не стоит полагаться.
В моем случае, несмотря на изменение частей URL-адреса, localStorage
, похоже, возвращает тот же объект.
Хранить данные в LocalStorage — React
Что изменилось в React?
Немного! Мы можем использовать тот же код JavaScript для хранения и извлечения данных из localStorage
. Помни useEffect
!
Один шаг за раз.
Когда у вас есть объект, вы можете сохранить его и получить следующим образом:
function App() { localStorage.setItem("userData", JSON.stringify(userData)); const data = localStorage.getItem("userData"); console.log("data: ", JSON.parse(data)); return (...) }
Однако есть что вспомнить! Если мы посмотрим на консоль, то увидим, что React зарегистрировался дважды! По крайней мере, это один и тот же объект!
Почему React регистрируется дважды?
React регистрирует один и тот же объект дважды из-за метода жизненного цикла компонента.
Поскольку и монтирование, и обновление запускают рендеринг, код внутри вашего компонента выполняется дважды.
В моем случае console.log находится в App()
, поэтому он выполняется при монтировании компонента и при его обновлении.
Когда вы работаете с побочными эффектами в React, вы можете использовать useEffect
.
Код становится:
function App() { localStorage.setItem("userData", JSON.stringify(userData)); useEffect(() => { const data = localStorage.getItem("userData"); console.log("data: ", JSON.parse(data)); }, []); return (...) }
Имейте в виду, что вам нужно импортировать useEffect
.
Кроме того, помните, что если у вас есть React.StrictMode
, обернутый вокруг вашего компонента App
, React будет рендериться дважды.
Как сообщил StackOverflow, StrictMode
отрисовывает компоненты дважды (при разработке, а не в производстве), чтобы обнаружить любые проблемы с вашим кодом и предупредить вас о них (что может быть весьма полезно).
Перейдите к index.js
и при необходимости удалите React.StrictMode
.
// index.js ... root.render( <React.StrictMode> // remove this <App /> </React.StrictMode> // and this! );
Хранить данные в LocalStorage — Angular
Что изменилось в Angular?
Немного! Мы можем использовать тот же код JavaScript для хранения и извлечения данных из localStorage
.
В следующем примере я добавляю код в AppComponent.
Все происходит внутри ngOnInit.
export class AppComponent implements OnInit { userData = { ... } ngOnInit() { localStorage.setItem('userData', JSON.stringify(this.userData)) const data = localStorage.getItem('userData') console.log('data: ', JSON.parse(data)) } }
В качестве побочного замечания, было бы более уместно работать с эффектами из сервиса.
Краткое содержание
- Хранить данные:
localStorage.setItem(key, value)
- Чтение данных:
localStorage.getItem(key)
- Чтобы сохранить данные JSON, преобразуйте значение с помощью
JSON.stringify(value)
- Чтобы преобразовать данные JSON
JSON.parse(value)
- В React используйте
useEffect
для работы с побочными эффектами. Возможно, вам придется удалитьReact.StrictMode
- В Angular просто используйте простой JavaScript внутри ngOnInit или там, где вы предпочитаете!
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.