Начиная с HTML5, современные браузеры предлагают различные варианты хранения пользовательских данных внутри браузера. Эти варианты хранения известны как хранилище браузера. Но они разные по своим характеристикам и вариантам использования. До внедрения HTML5 у нас были только файлы cookie для хранения данных в браузере. Но есть некоторые ограничения на использование файлов cookie.

Объект Storage API используется для хранения данных на стороне клиента и в этом смысле действует как альтернатива файлам cookie. Преимущество Storage в размере хранилища (от 5 МБ, в зависимости от браузера, при превышении лимита ошибка «QUOTA_EXCEEDED_ERR») и отсутствии необходимости запрашивать на сервер . Существенным недостатком является безопасность: как только вредоносный скрипт получает доступ к странице, он исчезает. Поэтому крайне не рекомендуется хранить конфиденциальную информацию в Хранилище. Справедливости ради нужно отметить, что сегодня на стороне клиента есть более продвинутые решения для хранения данных — это IndexedDB, Service Workers + Cache API и т. д.

Локальное хранилище:

  • Данные в localStorage хранятся в виде пар ключ/значение.
  • Данные хранятся в виде строк
  • Данные не сортируются, что иногда приводит к их смешиванию.
  • Если вы включите режим инкогнито или приватный режим в своем браузере, вы не сможете использовать localStorage (в зависимости от браузера).

LocalStorage имеет следующие методы:

  • localStorage.key(n) – это имя ключа с индексом n.
  • localStorage.getItem() — получить элемент
  • localStorage.setItem() — установить элемент
  • localStorage.removeItem() — удалить элемент
  • localStorage.clear() — очистить хранилище
  • localStorage.length — длина хранилища (количество элементов — пар ключ/значение)

Данные могут быть записаны в хранилище следующими способами:

Вы можете получить такие данные:

Данные в хранилище находятся в строковом формате, поэтому есть некоторые сложности с записью объектов, которые легко решаются с помощью JSON.stringify() и JSON.parse():

Для взаимодействия с localStorage существует специальное событие — storage (onstorage), которое возникает при записи/удалении данных. Он имеет следующие свойства:

  • ключ
  • старое значение
  • новое значение
  • url — адрес хранения
  • storageArea — объект, в котором произошло изменение

Событие может быть записано следующими способами:

Преимущества

  • Пользователь имеет полный контроль над доступом к вашим файлам, и поэтому это действительно безопасно по сравнению с онлайн-хранилищем, где вы не знаете, где хранятся ваши данные и кто имеет доступ к вашим данным.
  • Доступ к данным можно получить легко и быстро
  • Пользователю не требуется подключение к Интернету для доступа к документу

Недостатки

  • Приходится постоянно делать резервную копию данных, чтобы предотвратить потерю
  • Пользователь несет полную ответственность за сохранность данных
  • Сложнее делиться своими данными с другими, например. вам нужно загрузить на размещенный сервер, а затем отправить электронное письмо или ссылку предполагаемому пользователю
  • Занимает больше места для хранения, если вы храните локально

Хранилище сеансов

Свойство sessionStorage позволяет получить доступ к объекту Storage текущего сеанса. Свойство sessionStorage очень похоже на свойство Window.localStorage, единственное отличие состоит в том, что все данные, хранящиеся в localStorage, не имеют определенного времени жизни, а данные в sessionStorage очищаются при завершении сеанса текущей страницы. Сеанс страницы остается активным, пока открыто окно браузера, и сохраняется между перезагрузками страницы. Открытие той же страницы в новом окне браузера или на новой вкладке создает новый сеанс страницы, который отличается от поведения файлов cookie сеанса.

  • SessionStorage существует только на текущей вкладке браузера.
  • Данные продолжают существовать после перезагрузки страницы, но не после закрытия/открытия вкладки.
  • Данные в SessionStorage хранятся в виде пар ключ/значение.
  • Данные хранятся в виде строк

SessionStorage имеет следующие методы, такие как LocalStorage. Данные могут быть записаны в хранилище следующими способами:

Вы можете получить такие данные:

Запись объектов также решается с помощью JSON.stringify() и JSON.parse(). Событие — storage (onstorage) также возникает, когда изменения sessionStorage для данных записываются/удаляются.

Вот некоторые из причин, по которым следует хранить информацию на стороне клиента, а не отправлять ее на сервер:

  • Это увеличивает производительность сайта и сокращает время отклика. Потому что получение данных из браузера клиента происходит быстрее, чем отправка HTTP-запроса и получение их из бэкенда.
  • Если у пользователя есть персональные настройки и предпочтения, мы можем сохранить информацию об этих настройках в браузере. Таким образом, мы можем установить разные настройки для каждого пользователя. Например, один пользователь может выбрать темный режим, а другой пользователь может предпочесть светлый режим.
  • Иногда мы храним некоторые данные в браузере, чтобы наши пользователи могли получить к ним доступ без подключения к сети.
  • Нашим пользователям может понадобиться некоторая информация очень часто, и если эта информация не является конфиденциальной, как пароль, мы можем сохранить ее в браузере. Это уменьшит количество запросов к серверу.
  • Это не только улучшает пользовательский опыт, но и экономит пропускную способность интернета наших пользователей. Потому что им не нужно снова и снова загружать одни и те же данные с сервера.

Это вся информация, которую я знаю о localStorage, sessionStorage.

Надеюсь, это было полезно для вас!

Спасибо за прочтение! До скорой встречи. 😊

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .