HTML5. Урок #7. Web Storage API

by @html_books
HTML5. Урок #7. Web Storage API

HTML5 и веб-хранение данных

Благодаря тому, что в HTML5 есть поддержка веб-хранения, данные веб-сайтов можно хранить на локальном компьютере пользователя. До появления HTML5 в этих целях мы использовали куки-файлы JavaScript.

Преимущества веб-хранения данных

- безопасней

- быстрее

- возможность сохранять больший объём данных

- хранимые данные не передаются при каждом серверном запросе


Локальное хранение данных привязано к домену. Все веб-страницы, зарегистрированные на одном домене, могут хранить и получать одни и те же данные.





Виды объектов веб - хранения

Есть два типа объектов веб-хранения:

- sessionStorage()

- localStorage()

Сравнение: сессионное и локальное хранилище

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

- в локальном хранилище данные хранятся без ограничения по времени


Вам нужно познакомиться с азами JavaScript, чтобы понимать принцип работы с API.





Теперь о значениях


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

Сохранение значения:

localStorage.setItem("key1", "value1");

Извлечение значения:

//чтобы показать значение
alert(localStorage.getItem("key1"));

Удаление значения:

localStorage.removeItem("key1");

Удаление всех значений:

localStorage.clear();

Такой же синтаксис используется и для сессионного хранения, с одним отличием: вместо localStorage используется sessionStorage.

June 13, 2018
by @html_books