Обзор средств хранения данных на клиентской стороне

Хранение данных непосредственно в браузере обладает множеством преимуществ, основное из которых это быстрый и независимый от сети доступ к “базе данных”. На данный момент есть 4 активных метода для этого (плюс один устаревший):

1. Куки
2. Локальное хранилище
3. Сессионное хранилище
4. IndexedDB
5. WebSQL (устаревшее)

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

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

Мы можем создавать, читать и удалять куки, используя следующий синтаксис:

• Их можно использовать для коммуникации с сервером
• Мы можем определить для куки срок их автоматического окончания вместо того, чтобы удалять вручную.

• Они добавляются к загрузке страницы документа
• Они могут хранить небольшое количество данных
• Они могут содержать только строки.
• Потенциальные проблемы с безопасностью.
• Это метод не рекомендуется для хранения данных на клиенте с момента появления Web Storage API (локальное и сессионное хранилище).

У куки есть базовая поддержка во всех больших браузерах.

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

Локальное хранилище это одна из разновидностей Web Storage API, специального API для хранения данных в браузере в формате ключ-значение. Этот API был создан как решение для проблем с куки и является более интуитивным и безопасным способом хранения простых данных внутри браузера.

Хотя технически мы можем хранить в локальном хранилище только строки, это обходится за счет преобразования в JSON. Таким образом мы можем сохранять в локальном хранилище более сложные данные по сравнению с куки.

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

• Предлагает более простой и интуитивный интерфейс хранения данных .
• Более безопасно для хранения данных на клиенте.
• Позволяет хранить больше данных (все 3 пункта — в сравнении с куки).

• Позволяет хранить только строки

Сессионное хранилище

Сессионное хранилище это вторая разновидность Web Storage API. Оно точно такое же как и локальное хранилище за исключением того, что данные хранятся только для сессии вкладки браузера. Как только пользователь уходит со страницы и закрывает браузер, данные очищаются.

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

Достоинства, недостатки и поддержка в браузерах точно такие же как и у локального хранилища.

IndexedDB

IndexedDB это намного более сложное и проработанное решение для хранения данных в браузере, так как это низкоуровневый API для хранения на клиенте значительного количества структурированных данных. По своей сути это объектно-ориентированная база данных, основанная на JavaScript, которая позволяет нам легко сохранять и извлекать данные, проиндексированные по ключу.

В моей статье Building a Progressive Web Application я более детально рассмотрела как использовать IndexedDB для создания offline-first приложения.

Примечание: во всех примерах используется библиотека Джейка Арчибальда IndexedDB Promised library, предлагающая работу с IndexedDB при помощи методов на основе промисов.

Использование IndexedDB является более сложным в сравнении с остальными методами хранения данных в браузере. Перед тем как мы сможем создавать/читать/обновлять/удалять какие-либо данные, нам надо сначала открыть базу данных и создать хранилища (аналогичные таблицам в базе данных).

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

А вот действия для извлечения данных:

И наконец, образец кода для удаления данных:

Если вы заинтересованы в том, чтобы узнать больше об использовании IndexedDB, вы можете прочитать мою статью о том, как я использовала это в своем PWA (прогрессивном веб-приложении).

• Могут обрабатывать более сложные структурированные данные.
• Может работать с разными “базами данными” и “таблицами” внутри каждой “базы данных”.
• Больше объем хранения.
• Больше контроля по взаимодействию с хранилищем.

• Более сложное по сравнению с Web Storage API.

WebSQL

WebSQL это API для реляционной базы на клиенте, сходное с SQLite. С 2010 рабочая группа W3C прекратила работу над этой спецификацией и этот API больше не является частью спецификации HTML и не должен использоваться.