1. Сохранение данных на стороне клиента

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

Веб хранилища представляют собой более функциональную альтернативу 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>