Хранилище dom

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

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

Куки

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

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

Базовые CRUD-операции с куки

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

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

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

Недостатки куки

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

Поддержка в браузерах

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

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

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

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

Базовые CRUD-операции с локальным хранилищем

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

Преимущества локального хранилища

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

Недостатки локального хранилища

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

Поддержка в браузерах

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

Сессионное хранилище это вторая разновидность Web Storage API.

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

Базовые CRUD-операции с сессионным хранилищем

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

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

IndexedDB

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

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

Базовые CRUD-операции с IndexedDB

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

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

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

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

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

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

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

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

Недостатки IndexedDB

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

Поддержка в браузерах

WebSQL

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

Сравнение

Cookies Local Storage Session Storage IndexedDB
Лимит хранимых данных ~4KB ~5MB ~5MB До половины жесткого диска
Постоянное хранение Да Да Нет Да
Тип данных Строка Строка Строка Любые структурированные данные
Индексируемость Нет Нет Нет Да

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

Благодаря этому можно «научить» старые браузеры (даже IE6) правильно обрабатывать «неизвестные» HTML элементы.

Определение семантических элементов как блоковые элементы

HTML5 определяет восемь новых семантических тегов. Все они являются блоковыми элементами.

Чтобы обеспечить корректное поведение этих HTML элементов в старых браузерах, вы можете установить для них CSS свойство display в значение block:

Добавление новых HTML элементов

Также вы можете добавлять в HTML код страницы пользовательские элементы.

В следующем примере добавляется новый HTML элемент <myHero> и определяется для него стиль:

Выражение document.createElement(«myHero») на JavaScript необходимо для создания нового элемента в IE версии 9 и более ранних версий.

Проблемы с Internet Explorer 8

Вы можете использовать описанное выше решение для определения всех новых элементов HTML5.

Однако, IE8 (и более ранние версии) не позволяют определять стиль для неизвестных элементов!

Но спасибо HTML5Shiv! HTML5Shiv — плагин JavaScript, позволяющий определять стили элементов HTML5 в браузерах Internet Explorer до версии 9.

Подключение HTML5Shiv

Плагин HTML5Shiv подключается внутри тега <head>.

HTML5Shiv — это JavaScript файл, который подключается в теге <script>.

Плагин HTML5Shiv следует использовать, когда используются новые элементы HTML5 вроде <article>, <section>, <aside>, <nav>, <footer>.

Последнюю версию плагина HTML5shiv можно скачать с github авторов (https://github.com/aFarkas/html5shiv) или определить ссылку на CDN версию по адресу https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Синтаксис:

Пример подключения HTML5Shiv

Если вы не хотите или у вас нет возможности скачать на свой сайт файлы плагина HTML5Shiv, то вы можете определить ссылку на его CDN версию.

Скрипт плагина HTML5Shiv должен размещаться внутри тега <head> после всех определений стилей:

Новые элементы HTML5 Вверх Что нового в HTML5?

Немного понятий и фактов

Web Storage (Веб-Хранилище) — это технология хранения данных на стороне клиента прямиком в браузере.

Два объекта — две идеи

Веб-хранилище подразделяется на два типа:

Local Storage

Локальное хранилище — это объект , используемый для хранения данных вида «Ключ — Значение» на постоянной основе. Иначе говоря, данные хранятся до тех пор, пока их принудительно не заставят уйти, то есть удалят.

Session Storage

Хранилище данных сеансов — это объект , используемый для хранения данных вида «Ключ — Значение» на временной основе. Данные хранятся до тех пор, пока не будет закрыта вкладка или окно браузера.

Что можно хранить и для чего использовать?

Хранить можно всё то, что сможет уложиться в строку, так как единственным разрешенным типом данных для хранения является текстовый тип — строка.

Навскидку, веб-хранилище можно забивать следующими данными:

  • Состояние работы приложения — Например, последний открытый документ, значение измененного поля ввода или история поиска по сайту.
  • Настройки пользователя — Например, выбранная тема оформления сайта или вид отображения информации.
  • Сохранение пользовательских данных при неудачной попытке отправки на сервер.
  • Запись данных по мере их ввода — Например, редактор текста StackEdit.

Внимание!

Конфиденциальную информацию пользователя не стоит хранить в веб-хранилище!

Данные не шифруются и могут быть скомпрометированы.

Поддержка браузеров

Картина замечательная, даже лучше, чем можно было представить себе:

Оценить всю сложившуюся на данный момент ситуацию можно на сайте Can I Use.

Доступный размер

В отличии от печенек (HTTP cookie), веб-хранилище предоставляет намного больший размер — 4Кб против ~5Мб.

Проведя небольшой тест на реальных устройствах, получаем следующие данные:

  • Chrome 38, FireFox 33 и Opera 25 — размер хранилища 5000 Кб.
  • IE8-11 — размер хранилища 4750 Кб.
  • iOS 5-8.1 Safari, OS X Safari — размер хранилища 2500 Кб.
  • Android 4.x-5 — размер хранилища 5000 Кб.
  • Windows Phone 7.8 — размер хранилища 4750 Кб.

Устройства проверялись с «заводскими» настройками браузера, то есть никаких настроек до тестирования не проводилось. Протестировать ваше устройство можно используя вот «этот» скрипт.

Работаем с данными

Рассмотрим традиционное использование объекта и не совсем традиционное.

Объектом мы заниматься не будем, так как единственное различие с — это срок хранения данных. Все методы и свойства объекта одинаковые, и для работы с хранилищем данных сеансов необходимо лишь заменить объект в коде.

Пример — Запись данных в хранилище

Записать данные в хранилище можно тремя способами:

Пример — Чтение данных из хранилища

Считать данные из хранилища также просто как и записать:

Пример — Удаление данных из хранилища

Удаление данных имеет всего один синтаксис:

Пример — Удаление всех данных из хранилища

Если вдруг вам надоело записывать и считывать данные в веб-хранилище, то в любой момент вы можете остановить это, удалив все записи:

Пример — Количество записей в хранилище

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

Пример — Получение всех записей хранилища

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

В цикле перебираются все элементы хранилища, получаются их ключи и значения.

Пример — Хранение не строковых данных

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

Мы хотим сумму всех имеющихся элементов. Получаем:

Просто используем для этого функцию .

Если имеем дело с датой, то придется использовать объект :

Если перед записью есть возможность отформатировать дату в текстовую строку, то лучше сделать так:

Пример — Записываем в хранилище массив

Вы не забыли, что веб-хранилище дружит только со строками? Нам нужно больше функционала. Исправляем.

Схема махинаций:

  • Преобразование массива в строку.
  • Запись строки в хранилище.
  • Чтение строки из хранилища.
  • Преобразование строки в массив.

Пффф.

Легко!

На входе у нас есть массив:

Преобразуем его в строку, используя , и записываем в хранилище:

Для внутреннего удовлетворения посмотрим, что выведет :

Спустя сто и один день, мы обращаемся к хранилищу и хотим заполучить наш массив обратно:

И снова нужно успокоить в себе параноика тем, что ожидаемое получено в необходимой форме:

Таким путём можно пойти и при необходимости записи объектов в веб-хранилище:

Очень удобно и практично.

К слову, редактор StackEdit хранит так настройки и сами записи:

В реальной жизни это выглядит так:

Пример — Отслеживание изменения хранилища

Веб-хранилище генерирует событие на каждое своё изменение: добавление, изменение или удаление.

Вешаем прослушку на событие:

Кстати, объект, который передается функции обработчика событий, содержит в себе немного полезной информации:

key

Ключ измененной, добавленной или удаленной записи.

oldValue

Значение ключа до изменения.

newValue

Значение ключа после изменения.

url

URL страницы, которая породила событие .

storageArea

или , в зависимости от того, где произошло изменение.

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

Выводы

По сути дела, это круто!

Web Storage — это просто ещё один шаг к оффлайн HTML5 приложениям. Уже сейчас вы можете хранить настройки своих веб-приложений в удобном для вас виде прямиком в браузере. Не маловажной ступенью дальнейшего развития вашего проекта будет сохранение введенных данных пользователя, при неудачной попытке отправки на сервер или валидации, и последующего использования их при повторном заполнении. Именно для этого можно использовать объект . Согласитесь — не это ли будущее отзывчивых приложений? Я уже не представляю себе повторный ввод всех полей в форме, если была допущена ошибка ранее и страница обновилась.

Кратко о плюсах веб-хранилища:

  • Достаточно большой объем хранилища.
  • Приличная скорость.
  • Неограниченное время жизни.
  • Удобный интерфейс общения с данными.

Добавить комментарий

Закрыть меню