Руководство по localStorage и sessionStorage в HTML5

Функция веб-хранилища в HTML5 позволяет хранить некоторую информацию локально на компьютере пользователя, подобно файлам cookie. Хотя работает это быстрее и удобнее, но использование веб-хранилища не безопаснее, чем cookie. Подробнее см. Руководство по использованию cookie-файлам в PHP.

Информация, хранящаяся в веб-хранилище, не отправляется на веб-сервер, в отличие от файлов cookie, где данные отправляются на сервер с каждым запросом. Кроме того, файлы cookie позволяют хранить небольшой объем данных (около 4 КБ), тогда как веб-хранилище позволяет хранить до 5 МБ данных.

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

• Local storage — Локальное хранилище использует объект localStorage для постоянного хранения данных для всего вашего веб-сайта. Это означает, что сохраненные локальные данные будут доступны на следующий день, на следующей неделе или в следующем году, если вы не удалите их;
• Session storage — Хранилище сеансов использует объект sessionStorage для временного хранения данных, для одного окна или вкладки браузера. Данные исчезают, когда сессия заканчивается, то есть когда пользователь закрывает окно или вкладку браузера.

Объект localStorage

Объект localStorage хранит данные без срока годности. Каждый фрагмент данных хранится в паре ключ/значение. Ключ идентифицирует имя информации (например, first_name), а значение связывается с этим ключом (скажем, Роберт). Вот пример:

<script>
// Check if the localStorage object exists
if(localStorage) {
    // Store data
    localStorage.setItem("first_name", "Роберт");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else {
    alert("Sorry, your browser do not support local storage.");
}
</script>

Приведенный выше код JavaScript имеет следующие значения:

• localStorage.setItem(key, value) хранит значение, связанное с ключом.
• localStorage.getItem(key) извлекает значение, связанное с ключом

Вы также можете удалить конкретный элемент из хранилища, если он существует, передав имя ключа removeItem(), например так: localStorage.removeItem("first_name").

Однако, если вы хотите удалить все хранилище, используйте метод clear(), например localStorage.clear(). Метод clear() не принимает аргументов и просто удаляет все пары ключ/значение из localStorage сразу, поэтому тщательно подумайте, прежде чем его использовать.

Объект sessionStorage

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

Давайте посмотрим следующий пример, чтобы понять, как это работает:

<script>
// Check if the sessionStorage object exists
if(sessionStorage) {
    // Store data
    sessionStorage.setItem("last_name", "Parker");
    
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else {
    alert("Sorry, your browser do not support session storage.");
}
</script>