Узнайте, как хранить данные в localStorage в JavaScript, React или Angular.

Вы можете хранить некоторые данные (около 5 МБ, но проверьте здесь ) в браузере, используя объект localStorage или sessionStorage.

Используя localStorageобъект, данные, хранящиеся в браузере, не имеют срока действия.

Однако вы должны помнить, что просмотр с использованием сеанса «инкогнито» очистит данные, когда будет закрыта последняя «личная» вкладка.

В этом посте не рассматриваются различия между localStorage и sessionStorage , но полезно их знать.

Хранить данные в LocalStorage — JavaScript

Это то что тебе нужно знать.

Вы можете сохранить данные localStorage, используя следующий синтаксис

localStorage.setItem(variableKey, variableValue);

Хранить данные 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));

Как узнать, работает ли это? Пытаясь прочитать данные, которые вы только что сохранили.

// Retrieve the object from the storage
const data = localStorage.getItem("userData");
console.log("data: ", JSON.parse(data));

Удалить данные JSON

Наконец, вы можете удалить данные из localStorage.

Есть два пути: removeItem()и clear().

При использовании removeItem()вы удаляете только значения, связанные с ключом, который вы передаете, например, 'userData'в приведенном ниже примере.

localStorage.removeItem('userData');

localStorage.clear();

Хорошо знать

Как сообщается на MDN , localStorageданные специфичны для протокола документа.

Что это значит?

Это означает, что для каждого URL-адреса браузер , скорее всего, создаст новую «корзину» , в которой будут храниться данные.

Скажем, вы работаете с HTML и JS на своем ноутбуке. Когда вы открываете HTML-файл в браузере, URL-адрес будет выглядеть примерно так:

file:///C:/Users/John/webProjects/appName/localStorage.html

В моем случае, несмотря на изменение частей 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 регистрирует один и тот же объект дважды из-за метода жизненного цикла компонента.

Поскольку и монтирование, и обновление запускают рендеринг, код внутри вашего компонента выполняется дважды.

В моем случае есть файл 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 (...)
}

Кроме того, помните, что если у вас есть React.StrictModeобертка вокруг вашего Appкомпонента, React будет рендериться дважды.

Как сообщается на StackOverflow , StrictModeрендерит компоненты дважды (при разработке, но не в продакшене), чтобы обнаружить любые проблемы с вашим кодом и предупредить вас о них (что может быть весьма полезно).

Перейти index.jsи удалить React.StrictMode, если необходимо.

// index.js
...
root.render(
  <React.StrictMode> // remove this
    <App />
  </React.StrictMode> // and this!
);

Что изменилось в 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)
• Преобразование данных JSONJSON.parse(value)
• В React используйте useEffectдля борьбы с побочными эффектами. Возможно, вам придется удалитьReact.StrictMode
• В Angular просто используйте простой JavaScript внутри ngOnInit или там, где вы предпочитаете!