Начиная с 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 .