Сети хранения в HTML5

Хранение данных на стороне клиента

HTML5 предлагает два новых объекта для хранения данных на стороне клиента:

• localStorage - хранит данные без ограничения времени
• sessionStorage - хранит данные одного сеанса

Ранее это делалось с кукис (cookies). Но кукис не подходят для больших объемов данных, так как они передаются по КАЖДОМУ запросу на сервер, что делает его очень медленным и неэффективным.

В HTML5, данные НЕ передаются на каждый запрос сервера, а используются ТОЛЬКО по просьбе. Это позволяет хранить большие объемы данных без ущерба для производительности сайта.

Данные хранятся в различных областях для различных веб-сайтов и веб-сайт может получить доступ только к данным, хранящимся в нем.

HTML5 использует JavaScript для хранения и доступа к данным.

Объект localStorage

Объект localStorage хранит данные без ограничения времени. Эти данные будут доступны на следующий день, неделе или году

Как создать и получить доступ к localStorage:

Пример 1

<script>
localStorage.lastname="Lisa";
document.write(localStorage.lastname);
</script>

Пример 2

<script>
if (localStorage.pagecount)
{
        localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
        localStorage.pagecount=1;
}
document.write("Посетили: " + localStorage.pagecount + " раз(а).");
</script>

Объект sessionStorage

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

Как создать и получить доступ к sessionStorage:

Пример 3

<script>
sessionStorage.lastname="Lisa";
document.write(sessionStorage.lastname);
</script>

Пример 4

<script>
if (sessionStorage.pagecount)
{
          sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
          sessionStorage.pagecount=1;
}
document.write("Посетили " + sessionStorage.pagecount + " раз(а) в этой сессии.");
</script>