Угловой

Как хранить данные 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 . Заинтересованы в хакинге роста? Ознакомьтесь с разделом Схема.