HTML5-хранилище: вводный курс

if (Modernizr.localstorage) {

//хранилище доступно!

}else {

//встроенной поддержки хранилища нет,

//стоит попробовать dojox.storage или иное стороннее решение

Использование HTML5-хранилища

В основе HTML5-хранилища лежат именованные пары «ключ — значение». Вы сохраняете данные под именованным ключом, а затем по тому же ключу система будет возвращать вам эти данные:

interface Storage {

getter any getItem(in DOMString key);

setter creator void setItem(in DOMString key, in any data);

};

Сам именованный ключ — обязательно строка. Данные, сохраняемые под ключом, могут быть любого типа, поддерживаемого JavaScript: строки, логические значения, целые числа, числа с плавающей запятой. Впрочем на самом деле любые данные хранятся в виде строк. Если вы сохраняете и извлекаете не строки, то для перевода извлеченных данных в ожидаемый JavaScript-тип надо будет пользоваться функциями parseInt(), parseFloat() и им подобными.

При вызове setItem() с именем ключа, которому уже присвоено какое-либо значение, это значение будет заменено новым. Если вызвать getItem() с несуществу­ ющим ключом, то система не возбудит исключение, а возвратит null.

Объект localStorage, подобно некоторым другим объектам JavaScript, можно рассматривать как ассоциативный массив. Это значит, что вместо методов getItem() и setItem() разрешается пользоваться квадратными скобками. Рассмотрим, например, следующий фрагмент кода:

var foo = localStorage.getItem("bar"); // …

localStorage.setItem("bar", foo);

Если применить синтаксис с квадратными скобками, то этот фрагмент примет следующий вид:

var foo = localStorage[“bar”]; // …

localStorage[“bar”] = foo;

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

interface Storage {

deleter void removeItem(in DOMString key); void clear();

}

Если применить removeItem() к несуществующему ключу, то ничего не произойдет.

Наконец, имеется свойство, позволяющее узнавать общее количество значений в хранилище и перебирать все ключи по индексу (то есть определять имя каждого ключа):

interface Storage {

readonly attribute unsigned long length; getter DOMString key(in unsigned long index);

};

Если при вызове key() индекс лежит не в диапазоне от 0 до length-1, то функция вернет null.

Следим за состоянием HTML5-хранилища

Если вашей программе нужно следить за изменениями в состоянии хранилища, то она должна реагировать на событие storage. Событие storage объекта window происходит, когда после вызова setItem(), removeItem() или clear() что-либо в хранилище меняется. Так, если вы вновь присвоили ключу уже закрепленное за ним значение или вызвали clear() в момент, когда хранилище пусто, storage не сработает, потому что в области хранения ничего не изменилось.

Событие storage поддерживается везде, где поддерживается объект localStorage, тоестьивInternetExplorer8.НовIE8нереализованстандартW3CaddEventListener (который, правда, будет наконец-то добавлен в IE 9). Значит, чтобы ваш код перехватывал событие storage, надо узнать, какой механизм работы с событиями поддерживает браузер1. Это можно сделать так:

if (window.addEventListener) { window.addEventListener("storage", handle_storage, false);

} else {

window.attachEvent("onstorage", handle_storage);

};

Функцияобратноговызоваhandle_storage будетпримененакобъектуStorageEvent, а в Internet Explorer — к хранящему события свойству window.event:

function handle_storage(e) { if (!e) { e = window.event; }

}

После выполнения этого фрагмента кода переменная e станет объектом Storage­ Event. Его полезные свойства перечислены в табл. 7.2.

1Подготовленный читатель, который уже знает, как перехватывать события, может пропустить весь этот раздел. Перехват события storage работает стандартным образом. В частности, если для регистрации обработчиков событий вы пользуетесь jQuery или какой-либо другой библиотекой JavaScript, то их возможности можно распространить и на storage. — Примеч. авт.

пример» главы 4. В нашей реализации есть одна проблема: если закрыть окно браузера в процессе, то текущее состояние и результаты будут утрачены. HTML5хранилище позволяет сохранять игровой процесс локально — в самом браузере. Можете открыть демонстрационную страницу http://diveintohtml5..org/examples/ localstorage-halma..html, сделать несколько ходов, закрыть вкладку браузера, а затем восстановить ее. Если в вашем браузере поддерживается HTML5-хранилище, то демостраница волшебным образом «вспомнит» состояние игры: сколько ходов вы сделали, как была расположена на доске каждая из фишек, была ли выбрана одна из фишек (если да, то какая именно).

Как работает этот механизм? Каждый раз при изменении состояния игры вызывается следующая функция:

function saveGameState() {

if (!supportsLocalStorage()) { return false; } localStorage["halma.game.in.progress"] = gGameInProgress; for (var i = 0; i < kNumPieces; i++) {

localStorage["halma.piece." + i + ".row"] = gPieces[i].row; localStorage["halma.piece." + i + ".column"] = gPieces[i].column;

}

localStorage["halma.selectedpiece"] = gSelectedPieceIndex; localStorage["halma.selectedpiecehasmoved"] = gSelectedPieceHasMoved; localStorage["halma.movecount"] = gMoveCount;

return true;

}

Как можно видеть, объект localStorage «узнает», есть ли начатая и неоконченная игра (свойство gGameInProgress булевого типа). Если такая игра есть, то перебираются все фишки на игровом поле (gPieces, массив JavaScript) и в хранилище попадают строки и столбцы, на пересечении которых находятся фишки. После этого сохраняются некоторые дополнительные параметры: выбранная фишка (gSelectedPieceIndex, целое число), возможность продолжения серии переносов этой выбранной фишки (gSelectedPieceHasMoved булевого типа), общее количество сделанных ходов (gMoveCount, целое число).

При загрузке страницы мы не вызываем автоматически функцию newGame(), которая бы присвоила всем этим переменным значения по умолчанию, а вызываем resumeGame(). Опираясь на возможности HTML5-хранилища, функция resumeGame() проверяет, нет ли локально сохраненного состояния игры. Если есть, то значения будут восстановлены из объекта localStorage:

function resumeGame() {

if (!supportsLocalStorage()) { return false; }

gGameInProgress = (localStorage["halma.game.in.progress"] == "true"); if (!gGameInProgress) { return false; }

gPieces = new Array(kNumPieces);

for (var i = 0; i < kNumPieces; i++) {

var row = parseInt(localStorage["halma.piece." + i + ".row"]);

var column = parseInt(localStorage["halma.piece." + i + ".column"]); gPieces[i] = new Cell(row, column);

}