Объяснение API LocalStorage менее чем за 5 минут

Будучи веб-разработчиками, мы все сталкивались с ситуацией, когда мы хотим сохранить часть информации, такую ​​как пользовательские данные, предпочтения темы или выбранные фильтры, чтобы предоставить нашим пользователям единообразный опыт в сеансах браузера.

Что ж, именно здесь на сцену выходит LocalStorage API.

Держись, держись! Начнем с основ

Что такое локальное хранилище?

LocalStorage API веб-браузеров позволяет сохранять, а затем читать сохраненные данные между сеансами браузера.

Давайте разберем это:

  • Это позволяет нам сохранять данные в постоянной памяти, чтобы данные оставались доступными, когда мы перезагружаем браузер или даже компьютер.
  • Он хранит данные локально в этом источнике, что означает, что вы можете читать/записывать данные в LocalStorage только для текущего источника, т.е. для следующей комбинации (протокол+домен+порт)

Следует отметить, что LocalStorage начинается пустым, и элементы, добавленные во время приватного сеанса, удаляются, как только закрывается последняя приватная вкладка.

Внутреннее устройство LocalStorage

LocalStorage — это хранилище "ключ-значение", то есть в нем хранится заданное значение по предоставленному ключу, точно так же, как объект JavaScript, но постоянный.

Хранилище «ключ-значение» обеспечивает быстрый поиск и запись из-за своей структуры, поиск нужного элемента всегда будет занимать постоянное время (кроме времени, необходимого для ввода-вывода). Это означает, что наличие сотен ключей в вашем LocalStorage не замедлит поиск. (Не знаю, зачем вы это делаете.)

С его скоростью связано одно ограничение: key и value оба должны быть строкой для сохранения в LocalStorage.
Ну, это не так уж сложно обойти.

В настоящее время спецификация веб-хранилища позволяет хранить до 5 МБ на приложение в каждом браузере.

Как использовать LocalStorage?

К счастью, интерфейс LocalStorage API довольно прост.

Давайте продолжим и посмотрим, как мы можем выполнять основные операции, такие как создание/чтение/обновление/удаление в LocalStorage,

Запись данных

localStorage.setItem() принимает строку как key, а value также принимает как строку.

localStorage.setItem('<key>', '<value>')

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

Чтение данных

Чтобы прочитать сохраненную информацию, нам нужно предоставить key

const value = localStorage.getItem('<key>')
// value will be null or string

null возвращается, если данные с заданным key не найдены.

Хранение объектов в LocalStorage

Вы можете удивиться: «Струны! Боже, что мне делать с объектом?» Не волнуйся.

Нам по-прежнему разрешено хранить сериализованную версию объекта,

    // storing an object in LocalStorage
    const user = { name: 'anshuman_bhardwaj' }
    localStorage.setItem('user', JSON.stringify(user))
    // reading the object from LocalStorage
    const strinifiedUser = localStorage.getItem('user')
    if(strinifiedUser) {
      const retrivedUser = JSON.parse(strinifiedUser)
    }

Удаление данных

Существует два метода программного удаления сохраненных данных из LocalStorage.

removeItem

Если вы уже знаете, какой элемент удалить, removeItem — это то, что вам нужно.

localStorage.removeItem('<key>')

прозрачный

Если вы хотите удалить все ключи из хранилища, то clear — это чистый выбор. (вы видите, что я там сделал?)

localStorage.clear()

Как бы увлекательно это ни звучало, метод clear не следует использовать слишком часто, потому что он очищает все, а не только элементы, которые вы добавили.

Это означает, что если вы взаимодействуете со службами, которые используют LocalStorage, например. модулей аутентификации, таких как Firebase Auth или Okta, очистка LocalStorage также удалит данные, которые эти службы вложили, и нарушит их поведение.

Да, не волнуйся, я тебя понял.

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

Следующий шаблон предложил мне мой друг и коллега Райан.

Создание и использование пространства имен в LocalStorage?

Здесь мы можем применить принцип инкапсуляции, поместив все наши данные под заранее определенный и уникальный ключ или пространство имен. Это позволит нам скрыть наши от других частей приложения (которые мы не контролируем), а также убережет нас от ошибочного обновления данных, которых мы не должны.

«Звучит хорошо, но как это сделать?», — спросите вы.

Что ж, это проще, чем кажется, и работает, заключая все состояние приложения в один единственный ключ, а не используя новый ключ для каждой части информации.

Шаг 1

Создайте ключ, предсказуемый, но уникальный. Хорошим примером может быть [имя-вашего-приложения]+[некоторый-уникальный-токен], т.е. DEV-007.

Шаг 2

При сохранении информации мы считываем значение пространства имен из LocalStorage, десериализуем его, обновляем значение по ключу внутри объекта, а затем снова сериализуем его перед записью в LocalStorage.

Шаг 3

При чтении информации мы считываем значение namespace из LocalStorage, десериализуем его и возвращаем значение ключа из объекта.

Таким образом, мы рассматриваем пространство имен как собственное маленькое хранилище LocalStorage.

Ниже приведена реализация кода вышеизложенного:

const NAMESPACE = "DEV-007";
function writeToStorage(key, value) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  data[key] = value;
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}
function readFromStorage(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = JSON.parse(serializedData);
  return data ? data[key] : undefined;
}
function clear() {
  localStorage.setItem(NAMESPACE, JSON.stringify({}));
}
function removeItem(key) {
  const serializedData = localStorage.getItem(NAMESPACE);
  const data = serializedData ? JSON.parse(serializedData) : {};
  delete data[key]
  localStorage.setItem(NAMESPACE, JSON.stringify(data));
}

Приведенная выше реализация clear и removeItem безопасна в использовании и решает нашу проблему.

Не беспокойтесь, вам не придется писать свою собственную реализацию, потому что существует пакет npm store2, который решает вышеуказанную проблему и обеспечивает более интеллектуальное локальное хранилище.

Это все на сегодня. Если у вас есть какие-либо вопросы или предложения, не стесняйтесь оставлять их в комментариях ниже.
Чтобы узнать больше подобного контента, пожалуйста, подпишитесь на меня в Твиттере.

До следующего раза!

Первоначально опубликовано на https://theanshuman.dev 28 марта 2022 г.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.