Хранилище dom
Ещё один полезный механизм, заложенный в проект спецификации HTML 5 и уже реализованный в IE8, а также в ряде других браузеров - хранилище DOM.
С помощью хранилища DOM, как и с помощью файлов Cookie, веб-разработчики могут сохранять данные на стороне клиента для конкретного сеанса (sessionStorage) или специфические данные домена (localStorage) в виде пар имя-значение.
Хранилище DOM может предоставить значительно больше дискового пространства, чем файлы Cookie. В Internet Explorer в файлах Cookie можно сохранить только 4 КБ данных. В хранилище DOM в IE8 предоставляется приблизительно 10 МБ для каждой области хранения (в других браузерах - несколько меньше).
С функциональной точки зрения хранилища DOM значительно отличаются от файлов Cookie. Из хранилища DOM значения не передаются на сервер с каждым запросом, как в файлах Cookie, и срок действия данных в локальной области хранения никогда не истекает. В отличие от файлов Cookie в хранилище DOM проще осуществлять доступ к отдельным фрагментам данных с использованием стандартного интерфейса, который приобретает все более широкую поддержку у поставщиков браузеров.
Пример 14.2 иллюстрирует основные приёмы работы с хранилищем.
<!DOCTYPE html>
<html>
<head>
<title>Сохранение сеанса</title>
<script type="text/javascript">
var list;
window.onload = function() {
//сохраняем ссылку на список (она будет использоваться часто)
list = document.getElementById('list');
var StorageSupported = false;
//определяем, поддерживается ли хранилище:
//некоторые браузеры создают исключение при обращении к sessionStorage -
//поэтому помещаем проверку в блок try/catch
try {
if (sessionStorage) StorageSupported = true;
}
catch (e) { }
if (StorageSupported) {
//поддержка есть - сообщим об этом
document.getElementById('msg').innerHTML =
'Ваш браузер ' + 'поддерживает'.fontcolor('green') + ' хранилище сеанса';
//проходим в цикле по всем элементам, уже сохранённым в хранилище (если есть)
for (var n = 0; n < sessionStorage.length; n++) {
var key = sessionStorage.key(n);
//помещаем их ключи и значения в список list
list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
}
}
else {
//поддержки нет - также сообщаем об этом
document.getElementById('msg').innerHTML =
'Ваш браузер ' + 'не поддерживает'.fontcolor('red') + ' хранилище сеанса';
//получаем ссылку на массив элементов формы
var formElems = document.forms[0].elements;
//и делаем их недоступными (disabled)
for (i = 0; i < formElems.length; i++) {
formElems[i].disabled = 'disabled';
}
}
}
//это событие возникает (если браузер его поддерживает) при изменении в хранилище
document.onstorage = function() {
//опустошаем список
while (list.hasChildNodes()) { list.removeChild(list.firstChild); }
//и воссоздаём его на основе изменившегося хранилища
for (var n = 0; n < sessionStorage.length; n++) {
var key = sessionStorage.key(n);
list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
}
}
</script>
</head>
<body>
<h1>
Страница 1</h1>
<h2 id="msg">
</h2>
<form action="">
<p>
Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
сеанса под ключом <code>info1</code>:</p>
<textarea cols="50" rows="5" id="info1" onkeyup="if(value) sessionStorage.setItem('info1', value);"></textarea>
<p>
Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
сеанса под ключом <code>info2</code>:</p>
<textarea cols="50" rows="5" id="info2" onkeyup="if(value) sessionStorage.setItem('info2', value);"></textarea>
<p>
Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
сеанса под ключом <code>info3</code>:</p>
<textarea cols="50" rows="5" id="info3" onkeyup="if(value) sessionStorage.setItem('info3', value);"></textarea>
<p>
<label>
Ключи, существующие в хранилище сеанса:<br />
<br />
<select id="list" size="3" style="width: 200px;">
</select>
</label>
<br />
<input type="button" value="Поместить в textarea" onclick="if(list.value)
document.getElementById(list.value).value = sessionStorage[list.value]" />
<input type="button" value="Удалить выделенный"
onclick="if(list.value) sessionStorage.removeItem(list.value);" />
<br />
<input type="button" value="Удалить все" onclick="sessionStorage.clear();" />
<input type="button" value="Обновить список" onclick="document.onstorage()" />
<br />
<br />
<a href="Ext_sessionStorage_page2.htm">Перейти на страницу 2</a></p>
</form>
</body>
</html>
Листинг 21.2. Сохранение сеанса при помощи механизма sessionStorage (html, txt)