—»     —»   Учимся использовать HTML5 Offline Storage на сайте
  Раздел: Образование и Изучение   Нет комментариев  

Учимся использовать HTML5 Offline Storage на сайте



Кроме новых элементов в HTML5, эта новая веб-технология также предлагает Offline Storage. Существует несколько типов Offline Storage, и в нашем сегодняшнем руководстве мы рассмотрим sessionStorage и localStorage. Offline Storage позволяет нам экономить данные в браузере пользователя, и позволяет нашим веб-приложениям и играм работать без подключения к интернету (на определенный период времени, конечно).

Для примера из реальной жизни, разработчики могут извлекать преимущество из Offline Storage, используя его как резервную копию на случай, если подключение к интернету не доступно. Они могут отправить нужные данные на онлайн-сервер сразу после того, как подключение будет восстановлено.

Учимся использовать HTML5 Offline Storage на сайте

Если вам интересно узнать о том, как можно использовать это свойство на своем сайте, то ознакомьтесь с этой статьей.

sessionStorage

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

Для хранения данных в sessionStorage, мы можем использовать .setItem(). Давайте рассмотрим пример, в котором мы храним “Hello World!”.

sessionStorage.setItem("keyExample", "Hello World");

С другой стороны, мы также можем сделать следующее. Это позволит создать запись данных с anotherKeyName в качестве ключа и “Hello” в качестве значения.

sessionStorage.anotherKeyExample = "Hello Too";

В браузерах семейства Webkit, таких как Safari, Chrome и Opera, вы можете увидеть эти данные во вкладке Resources. В Firefox вы можете увидеть данные во вкладке Firebug DOM.

Учимся использовать HTML5 Offline Storage на сайте

Также следует отметить, что sessionStorage может хранить только строку или простой текст. Целое число будет переведено в строку.

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

var json = JSON.stringify({[1, 2, 3]});
sessionStorage.anotherKeyExample = json;

Запрос данных в sesssionStorage

У нас также имеется два способа запросить данные их sesssionStorage. Первый заключается в том, что мы можем использовать .getItem() или за счет прямого указания имени ключа следующим образом:

var a = sessionStorage.getItem("keyExample");
var b = sessionStorage.anotherKeyExample;

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

Как уже было отмечено выше, данные в sessionStorage будут удалены, когда пользователь закрывает окно или вкладку браузера. Однако мы также можем удалить эти данные намеренно. Мы можем использовать метод .removeItem() или удалить директорию следующим образом:

sessionStorage.removeItem("keyExample");
delete sessionStorage.anotherKeyExample;

LocalStorage

Мы также можем сохранить данные в браузере в форме localStorage. Однако в отличие от sessionStorage, данные localStorage сохраняются постоянно. Данные будут оставаться в браузере до тех пор, пока вы не удалите их намеренно.

Хранение данных в localStorage производится так же просто как и в sessionStorage. На самом деле, технический аспект такой же, за исключением того, что здесь мы используем объект localStorage. Мы можем внести запись данных при помощи метода the.setItem() или напрямую выставив его при помощи имени ключа следующим образом.

localStorage.setItem("keyName", "Hello, Local Storage");
localStorage.anotherKeyName = 1;

Мы запрашиваем данные при помощи метода .getItem().

var c = localStorage.getItem("keyName");
var d = localStorage.anotherKeyName

Таким же образом мы удаляем запись данных из localStroge посредством метода .removeItem() и удаляем директиву.

Лимит размера Offline Storage

Как у sessionStorage, так и у localStorage есть ограничение в форме максимальной вместительности, и у каждого браузера это ограничение уникально. Firefox, Chrome и Opera ограничивают его 5 мегабайтами на домен. Internet Explorer предоставляет по 10 мб. Так что, постарайтесь сделать так, чтобы объем ваших данных не выходил за эти рамки. Если же данные превышают этот объем, возможно вам следует рассмотреть альтернативные варианты вроде SQLite.

Определение способностей

Вдобавок, даже несмотря на то, что поддержка sessionStorage и localStorage довольно хороша (даже IE8 предоставляет нужную поддержку), возможно, вам все равно следует предварительно использовать функцию определения способностей в браузере. Таким образом у вас будет возможность добавить запасные функции, подразумевающие работу с Cookies, на случай, если браузер не поддерживает Offline Storage.

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

if ( window.localStorage ) {

} else {
alert('localStorage is not available');
}

В завершение

Offline Storage представляет собой действительно великолепное свойство, которое позволяет вашим веб-приложениям и играм работать оффлайн. В прошлом мы уже показывали вам реальные примеры использования.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5
Опубликовал Design FactoRy   Прочитано (раз): 2913   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31