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