Хранилище DOM: удобное хранение данных (ч.1)
20053
Предлагаем вашему вниманию очередную статью из цикла, посвящённого возможностям HTML 5 - новой версии языка разметки веб-страниц HTML. В преддверии скорого выхода очередной версии Internet Explorer эта тема становится всё актуальнее.
На этот раз мы рассмотрим средства HTML 5 для удобного хранения данных на клиентском компьютере. А именно, хранилище DOM (DOM Storage).
1. Средства хранения данных на клиентском компьютере: введение в суть вопроса
Начнём с того, что выясним, зачем это вообще может понадобиться и какими средствами, предоставляемыми современными веб-браузерами, мы можем для этого воспользоваться.
1.1. Зачем это нужно
Все переменные, что мы объявили в веб-сценарии на веб-странице, существуют в памяти компьютера до тех пор, пока данная страница открыта в браузере. Как только мы её выгрузим (перейдя на другую веб-страницу или закрыв браузер), все эти переменные будут удалены.
Рассмотрим такой пример. Сейчас многие веб-сайты, реализующие разграничение доступа, предлагают такую возможность, как сохранение имени и, возможно, пароля, под которыми посетитель заходит на данный сайт. Эти имя и пароль автоматически подставляются в поля ввода веб-формы входа; посетителю остаётся только нажать кнопку Войти, чтобы получить доступ к закрытым разделам веб-сайта.
Так вот, если мы в веб-сценарии на странице, где выполняется вход на данный веб-сайт, присвоим указанные посетителем имя и пароль каким-либо переменным, они будут существовать лишь до тех пор, пока в браузере загружена данная страница. Как только мы перейдём на другую страницу, даже принадлежащую тому самому веб-сайту, они будут потеряны.
Вывод: эти имя и пароль следует сохранить таким образом, чтобы они не были потеряны после ухода с данной веб-страницы. В идеале они должны сохраняться в файле прямо на клиентском компьютере и должны удовлетворять перечисленным ниже требованиям:
- К сохранённым таким образом данным не должны получить доступ злоумышленники. Мало ли что мы захотим там хранить - может быть, имя и пароль посетителя (которые, как всем известно, являются конфиденциальными данными)...
- Мы должны иметь возможность легко сохранять их, считывать и удалять (если возникнет такая потребность).
- Эти данные должны сохраняться отдельно для каждого домена, с которого загружаются веб-страницы. Это позволит нам разграничить данные, сохраняемые веб-страницами, что принадлежат разным веб-сайтам.
- Браузер не должен удалять эти данные, если, конечно, мы сами его об этом не попросим.
Как видите, без средств по хранению произвольных данных на клиентском компьютере во многих случаях не обойтись. К счастью, все современные браузеры предоставляют такие средства. Только разные. А какие именно, зависит от версии HTML, поддерживаемой каждым конкретным браузером.
1.2. Cookies - устаревший подход
Проблема хранения данных на клиентском компьютере стояла перед веб-программистами уже давно. Поэтому самое первое средство сделать это появилось ещё лет пятнадцать назад. Оно нам хорошо знакомо.
Это cookies (это множественное число; единственное число - cookie) - особые текстовые файлы, в которых мы можем сохранить произвольные данные небольшого объёма. Cookies создаются самим браузером и хранятся в специально отведённой для этого папке.
Cookie можно создать в обычном клиентском веб-сценарии, воспользовавшись свойством cookie объекта HTMLDocument. Этот объект представляет саму веб-страницу. Единственный экземпляр этого объекта создаётся самим браузером и доступен в любом месте любого сценария через переменную document. Кроме того, cookie может создать программа, работающая на стороне веб-сервера; все платформы для создания серверных программ, в частности, популярнейшая PHP, позволяют это сделать.
Для каждого домена, с которого загружаются веб-страницы, создаётся свой cookie. Он доступен только для веб-страниц, загруженных с данного домена или его поддоменов; веб-страницы с других доменов получить к нему доступ не могут.
При загрузке страницы браузер проверяет, привязан ли к домену, с которого она загружается, какой-либо cookie. Если такой cookie найдётся, он со всеми хранящимися в нём данными автоматически отправляется веб-серверу.
Cookies сохраняются на клиентском компьютере строго определённое время, указываемое при его создании. Cookie с истёкшим сроком хранения автоматически удаляются браузером.
На данный момент cookies чаще всего применяются при реализации веб-сайтов с разграничением доступа. Когда посетитель выполняет успешный вход на такой веб-сайт, серверная программа создаёт на его компьютере cookie, хранящий либо имя, либо внутренний идентификатор этого посетителя. Впоследствии, когда посетитель переходит на любую закрытую веб-страницу этого веб-сайта, серверная программа получает данный cookie и проверяет, присутствует ли в нём сохранённое ранее имя или идентификатор. Если cookie успешно получен, и имя (идентификатор) в нём есть, значит, данный посетитель успешно выполнил вход, и его можно пустить на закрытую веб-страницу; в противном случае посетитель "отфутболивается" на веб-страницу входа или регистрации.
К сожалению, cookie плохо подходит для хранения произвольных данных, которые планируется использовать исключительно в клиентских Web-сценариях. И вот почему...
- В cookie можно сохранить только одну-единственную строку. Если же мы захотим сохранить в нём несколько значений, нам придётся как-то преобразовать их в строку и, наоборот, после получения такой строки из cookie каким-то образом "разобрать" её на отдельные значения. Кстати, многие популярные JavaScript-библиотеки, такие как и , предоставляют удобные средства для работы с cookies: записи в них различных значений и получения их оттуда.)
- Как уже говорилось, cookie при загрузке веб-страницы отправляются веб-серверу, с которого эта веб-страница была загружена. Если мы собираемся хранить в cookies исключительно "клиентские" данные, нам это вряд ли понравится - ведь их могут перехватить злоумышленники. А отменить отправку cookie веб-серверу мы не можем.
- Cookie имеет строго определённый срок хранения, по истечении которого он удаляется, а это во многих случаях неприемлемо. Конечно, мы можем указать при создании cookie очень большой срок хранения, скажем, несколько лет, но для веб-программиста это лишняя головная боль...
- Один cookie может хранить не более 4 Кбайт данных. Маловато по нынешним временам, вы не находите?..
Несомненно, в качестве составной части механизма разграничения доступа cookies ещё долго будут вне конкуренции. Но в качестве средства хранения произвольных данных им лучше поскорее подыскать замену.
1.3. Хранилище DOM - подход в стиле HTML 5
И такая замена уже существует! Встречайте - хранилище DOM, одно из нововведений HTML 5.
Хранилище DOM создавалось именно как средство для хранения произвольных данных, которые будут использоваться исключительно в клиентских веб-сценариях. Достаточно посмотреть на список её преимущество перед cookies, чтобы понять это.
- Данные, хранящиеся в хранилище DOM, не отправляются на веб-сервер браузером. Впрочем, они могут быть программно, веб-сценарием, подставлены в веб-форму и таким образом всё-таки отправлены на веб-сервер, но это, как говорится, уже другая история...
- В хранилище DOM может быть помещено произвольное количество отдельных значений. При этом мы можем получить доступ к любому из этих значений или даже удалить его, не затрагивая другие.
- Максимальный объём данных, помещённых в хранилище DOM, составляет 10 Мбайт. Вполне достаточно, чтобы сохранить довольно большой текст.
Примечание:
Статья MSDN, посвящённая хранилищу DOM, утверждает, что оно может хранить 10 Мбайт данных. Однако опыты автора дали другой результат - 5 млн. байт (не 5 Мбайт!). Почему заявленное значение расходится с реальным - неизвестно. Возможно, это причуды Internet Explorer 9 RC, которые исчезнут в релизе.
- Хранилище DOM может хранить данные сколь угодно долго - пока мы сами их не удалим.
Для каждого домена, с которого были загружены веб-страницы, создаётся своя копия хранилища DOM. Эта её особенность была "унаследована" от cookie.
Отметим, что данные в хранилище DOM хранятся в виде файлов XML.
2. Подготовительные действия
Прежде чем задействовать хранилище DOM в своих веб-сценариях, ознакомимся с параграфами 2.2 и 3.2 . Описанные там вещи обязан принять во внимание любой веб-программист, который планирует вплотную заняться HTML 5.
3. Работа с хранилищем DOM
Настала пора рассмотреть основные принципы работы с хранилищем DOM.
Примечание:
Хранилище DOM доступно только в том случае, если веб-страница была загружена с веб-сервера. Если загрузить веб-страницу напрямую с жёсткого диска, хранилище DOM доступно не будет.
Отметим сразу, что HTML 5 предусматривает две разновидности хранилища DOM. Различаются они степенью доступности сохранённых в них данных веб-страницам, открытым в разных окнах или вкладках браузера. В остальном же они предоставляют абсолютно одинаковые возможности.
3.1. Сессионное хранилище DOM
Сессионное хранилище DOM доступно только для веб-страниц, загруженных с одного домена и его поддоменов и открывающихся последовательно в одном и том же окне или вкладке веб-браузера. Так, если открытая в какой-либо вкладке веб-страница сохранит данные в таком хранилище, то другая веб-страница того же сайта, открытая в этой же вкладке, получит к ним доступ, а страницы, даже принадлежащие этому же сайту, но открытые в других окнах или вкладках, - уже нет.
И ещё. Данные в сессионном хранилище DOM сохраняются, пока открыто данное окно или вкладка браузера, даже если мы впоследствии откроем какую-либо веб-страницу с другого домена. Однако как только мы закроем это окно или вкладку, данные, хранившиеся в сессионном хранилище, пропадут. Не забываем об этом.
Сессионное хранилище DOM представляет собой экземпляр объекта HTMLStorage (в документации на веб-сайте MSDN его иногда называют Storage). Этот экземпляр создаётся самим браузером и доступен через свойство sessionStorage объекта Window. Объект Window представляет окно или отдельную вкладку окна браузера (если он поддерживает вкладки); единственный его экземпляр, представляющий текущее окно или вкладку, также создаётся браузером и доступен в любом месте любого сценария через переменную window.
var oSessionStorage = window.sessionStorage;
Это выражение помещает сессионное хранилище DOM в переменную oSessionStorage.
Данные в сессионном хранилище фактически хранятся в виде пар <имя> - <значение>. Для сохранения одного значения по каким-либо именем мы используем выражение такого формата:
<сессионное хранилище DOM>.<имя> = <значение>;
t;значение>;[/code]
<Имя> сохраняемого <значения> должно удовлетворять тем же требованиям, что предъявляются к именам переменных и функций JavaScript. Так, эти имена не должны содержать пробелов.
Отметим, что <значение> помещается в сессионное хранилище в виде строки. Если же мы собираемся сохранить таким образом числовое, логическое значение или экземпляр какого-либо объекта, нам придётся преобразовать его в строковый вид.
[code]window.sessionStorage.name1 = "Вася";
window.sessionStorage.name2 = "Пупкин";
window.sessionStorage.age = (27).toString();[/code]
Здесь мы сохранили в сессионном хранилище две строки и число, предварительно преобразовав последнее в строку. Для преобразования числа в строку мы вызвали не принимающий параметров метод toString, поддерживаемый всеми объектами, доступными в JavaScript. Отметим: чтобы вызвать любой метод у константы (в нашем случае - числа), её значение следует заключить в скобки.
Интересная деталь. Когда мы сохраняем в сессионном хранилище какое-либо значение, в представляющем это хранилище экземпляре объекта HTMLStorage создаётся новое свойство, имя которое совпадает с указанным нами <именем> сохраняемого <значения> (см. описание формата выше). Так, после выполнения предыдущего примера в экземпляре объекта HTMLStorage будут созданы свойства name1, name2 и age. Именно поэтому, кстати, к именам значений предъявляются те же требования, что и к именам переменных и функций.
Получить сохранённые в сессионном хранилище данные можно таким же образом, каким получаются значения обычных свойств экземпляров объектов.
[code]var name1 = window.sessionStorage.name1;
var name2 = window.sessionStorage.name2;
var age = parseInt(window.sessionStorage.age);[/code]
Здесь мы получили все три сохранённых ранее значения в виде строк. Последнее значение при этом мы преобразовали в число, воспользовавшись функцией parseInt, которая принимает в качестве параметра строку, хранящую целое число, и возвращает его в числовом виде.
Ниже приведён HTML-код веб-страницы с формой, содержащей поля ввода, куда заносятся имя и фамилия посетителя, и кнопку Сохранить. При нажатии этой кнопки происходит сохранение введённых имени и фамилии в сессионном хранилище и переход на другую веб-страницу, код которой мы рассмотрим далее.
[code]<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Сессионное хранилище DOM</TITLE>
</HEAD>
<BODY>
<FORM>
Имя: <INPUT TYPE="text" ID="txtName1"><BR>
Фамилия: <INPUT TYPE="text" ID="txtName2"><BR>
<INPUT TYPE="button" ID="btnSave" VALUE="Сохранить">
</FORM>
<SCRIPT>
var oBtnSave = document.getElementById("btnSave");
oBtnSave.addEventListener("click",
function()
{
var oTxtName1 = document.getElementById("txtName1");
var oTxtName2 = document.getElementById("txtName2");
window.sessionStorage.name1 = oTxtName1.value;
window.sessionStorage.name2 = oTxtName2.value;
window.location.href = "2.html";
}, false);
</SCRIPT>
</BODY>
</HTML>[/code]
Событие click возникает при щелчке на элементе веб-страницы, а нашем случае - кнопке.
Поле ввода представляется в виде экземпляра объекта HTMLInputElement. Свойство value этого объекта хранит значение, занесённое в поле ввода.
Свойство location объекта Window хранит экземпляр объекта Location, представляющего браузер. Свойство href этого объекта хранит интернет-адрес открытой в данном окне (вкладке) веб-страницы в виде строки. Мы можем присвоить данному свойству строку с другим интернет-адресом, после чего браузер сразу же начнёт загрузку веб-страницы, располагающийся по этому интернет-адресу. Мы использовали эту особенность, чтобы открыть в браузере вторую веб-страницу.
Сохраним первую веб-страницу в файле под именем 1.html.
А вот HTML-код второй веб-страницы. Она считывает из сессионного хранилища сохранённые ранее имя и фамилию и выводит на экран приветствие.
[code]<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
<TITLE>Сессионное хранилище DOM</TITLE>
</HEAD>
<BODY>
<P ID="pOutput"></P>
<SCRIPT>
var oPOutput = document.getElementById("pOutput");
var s = "Здравствуйте, " + window.sessionStorage.name1 + " " +
window.sessionStorage.name2 + "!";
oPOutput.innerHTML = s;
</SCRIPT>
</BODY>
</HTML>[/code]
Все объекты, представляющие элементы веб-страницы, которые могут иметь какое-либо содержимое (абзацы, заголовки, контейнеры, ячейки таблицы и пр.), поддерживают свойство innerHTML. Это свойство хранит строку с HTML-кодом, создающим содержимое данного элемента. Мы можем присвоить этому свойству строку с HTML-кодом, создающим новое содержимое элемента веб-страницы, - и этот элемент получит новое содержимое. В нашем примере мы используем свойство innerHTML, чтобы задать для абзаца новое содержимое - текст приветствия.
Сохраним вторую веб-страницу в файле с именем 2.html.
Чтобы запустить данный пример, нам понадобится какой-либо веб-сервер, скажем, стандартно поставляющийся в составе Windows пакет Internet Information Services. Установим его, если ещё этого не сделали, и запустим.
Скопируем файлы 1.html и 2.html в корневую папку веб-сайта, созданного при установке веб-сервера, и откроем в браузере первую веб-страницу, набрав в его строке адреса http://localhost/1.html. Когда первая страница загрузится, введём в поля ввода свои имя и фамилию и нажмём кнопку Сохранить. Браузер тотчас загрузит вторую веб-страницу, на которой мы увидим приветствие.
Сессионное хранилище DOM подходит для сохранения временных данных, актуальных, только пока посетитель находится на данном веб-сайте и теряющих актуальность после ухода с него. Как мы уже знаем, данные, хранящиеся в сессионном хранилище, будут удалены после закрытия текущего окна или вкладки браузера. Например, мы можем кэшировать в сессионном хранилище список товаров, купленных в интернет-магазине, чтобы не загружать его каждый раз с веб-сервера, - это как раз такой случай.
Если же нам нужно сохранять некие данные на клиентском компьютере постоянно, даже после закрытия браузера, мы воспользуемся другой разновидностью хранилища DOM, о которой пойдёт речь во второй части этой статьи.
Дополнительные материалы
- .
- .
- .
- .
- .
- .
- .
- .
- .
- .
Продолжение следует...
Март 2011
Комментарии
