Веб хранилища позволяют хранить данные на стороне клиента.
ТвитнутьОбратите внимание: все HTML5 технологии, которые будут разобраны в данной и последующих главах этого учебника требуют знания JavaScript для их использования. Вы можете ознакомится с JavaScript в нашем JavaScript учебнике.
Веб хранилища представляют собой более функциональную альтернативу cookie.
Преимущества веб хранилищ:
Веб хранилища поддерживаются в следующих браузерах: IE8+, Safari 4+, Chrome 4+, Firefox 3.5+, Opera 10.50+.
Вы можете сохранять данные используя два специальных объекта: sessionStorage и localStorage.
Обращаться к данным объектам можно с помощью JavaScript и других клиентских скриптов.
Обратите внимание: каждый веб-сайт имеет доступ только к своим данным в хранилище и поэтому не может обращаться к данным, которые были сохранены другими сайтами.
Объект 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 сохраняет данные на неограниченный период времени.
Данные сохраненные в данном объекте будут доступны даже без подключения к интернету.
Пример
<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>