Функция веб-хранилища в HTML5 позволяет хранить некоторую информацию локально на компьютере пользователя, подобно файлам cookie
. Хотя работает это быстрее и удобнее, но использование веб-хранилища не безопаснее, чем cookie. Подробнее см. Руководство по использованию cookie-файлам в PHP.
Информация, хранящаяся в веб-хранилище, не отправляется на веб-сервер, в отличие от файлов cookie, где данные отправляются на сервер с каждым запросом. Кроме того, файлы cookie позволяют хранить небольшой объем данных (около 4 КБ), тогда как веб-хранилище позволяет хранить до 5 МБ данных.
Существует два типа веб-хранилищ, которые различаются по объему и сроку службы:
- Local storage — Локальное хранилище использует объект
localStorage
для постоянного хранения данных для всего вашего веб-сайта. Это означает, что сохраненные локальные данные будут доступны на следующий день, на следующей неделе или в следующем году, если вы не удалите их; - Session storage — Хранилище сеансов использует объект
sessionStorage
для временного хранения данных, для одного окна или вкладки браузера. Данные исчезают, когда сессия заканчивается, то есть когда пользователь закрывает окно или вкладку браузера.
Функция веб-хранилища HTML5 поддерживается во всех основных современных веб-браузерах, таких как Firefox, Chrome, Opera, Safari и Internet Explorer 8 и выше.
Объект 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
сразу, поэтому тщательно подумайте, прежде чем его использовать.
Данные веб-хранилища (localStorage
и sessionStorage
) не будут доступны для разных браузеров. Например, данные, хранящиеся в браузере Firefox, не будут доступны в Google Chrome, Safari, Internet Explorer или других браузерах.
Объект 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>