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