Веб хранилища позволяют хранить данные на стороне клиента.

Веб Хранилища

Обратите внимание: все HTML5 технологии, которые будут разобраны в данной и последующих главах этого учебника требуют знания JavaScript для их использования. Вы можете ознакомится с JavaScript в нашем JavaScript учебнике.

Веб хранилища представляют собой более функциональную альтернативу cookie.

Преимущества веб хранилищ:

• Можно хранить неограниченные объемы информации;
• Информация, сохраненная в хранилищах, доступна даже без подключения к интернету;
• Данные, находящиеся в хранилище, не отсылаются при каждом запросе страниц;
• Информацию более удобно сохранять и извлекать;
• Хранилища более безопасны чем cookie.

Веб хранилища поддерживаются в следующих браузерах: IE8+, Safari 4+, Chrome 4+, Firefox 3.5+, Opera 10.50+.

Сохранение данных

Вы можете сохранять данные используя два специальных объекта: sessionStorage и localStorage.

Обращаться к данным объектам можно с помощью JavaScript и других клиентских скриптов.

Обратите внимание: каждый веб-сайт имеет доступ только к своим данным в хранилище и поэтому не может обращаться к данным, которые были сохранены другими сайтами.

Использование sessionStorage

Объект sessionStorage сохраняет данные в течении пользовательской сессии. Когда браузер пользователя будет закрыт данные сохраненные в объекте будут удалены.

//Сохраняем данные
sessionStorage.html='HTML5 предоставляет множество интересных возможностей.';
sessionStorage.wisdomweb='Вы изучаете HTML5 на wisdomweb.ru.';
/* В течении пользовательской сессии мы можем извлечь сохраненные ранее данные
следующим образом: */
document.write(sessionStorage.html+'<br />');
document.write(sessionStorage.wisdomweb);

Данные в хранилище доступны со всех страниц сайта, а не только с той с которой они были сохранены.

<script>
<script type='text/javascript'>
function saveData(){
   sessionStorage.data='Я изучаю HTML5 на wisdomweb.ru';
   alert('Строка "Я изучаю HTML5 на wisdomweb.ru" была сохранена в хранилище.');
}
</script>
<p>Данные в хранилище доступны со всех страниц сайта, а не только с той с которой они были сохранены.</p>
<input type='button' value='Сохранить данные из хранилища' onclick='saveData()' />
<br /><br />
<iframe src='storage1.html' />
 

Использование localStorage

Объект localStorage сохраняет данные на неограниченный период времени.

Данные сохраненные в данном объекте будут доступны даже без подключения к интернету.

<script>
function save(){
localStorage.data='Веб хранилища - это более функциональная альтернатива cookie.';
}
function load(){
alert(localStorage.data);
}
</script>
<input type='button' value='Сохранить данные' onclick='save()' />
<input type='button' value='Извлечь данные' onclick='load()' />
<p><b>Обратите внимание:</b> Вы сможете извлечь сохраненные данные даже после перезагрузки браузера.</p>