HTML API для веб-хранилища (Web Storage)
API HTML Web Storage позволяет веб-приложениям хранить данные локально в браузере пользователя, и он лучше, чем cookie.
Что такое HTML Web Storage?
С веб-хранилищем приложения могут хранить данные локально в браузере. До HTML5 данные приложения приходилось хранить в cookie, которые отправлялись с каждым запросом к серверу. Веб-хранилище безопаснее и может хранить большие объёмы данных локально, не замедляя сайт. Лимит хранения намного больше, чем у cookie (не менее 5МБ), а данные никогда не отправляются на сервер. Хранилище привязано к источнику (домену и протоколу), поэтому все страницы одного источника используют общие данные.
Объекты API Web Storage
Веб-хранилище предоставляет два объекта: window.localStorage хранит данные без срока действия (они не теряются при закрытии вкладки), а window.sessionStorage хранит данные в течение одной сессии (теряются при закрытии вкладки).
Поддержка браузерами
И localStorage, и sessionStorage поддерживаются всеми современными браузерами (начиная с Chrome 4, Edge 8, Firefox 3.5, Safari 4 и Opera 11.5).
Проверка поддержки API Web Storage
Перед использованием веб-хранилища можно быстро проверить, поддерживает ли его браузер, протестировав typeof(Storage).
Пример
Проверка поддержки веб-хранилища.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Проверка поддержки</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
x.innerHTML = "Ваш браузер поддерживает Web Storage!";
} else {
x.innerHTML = "Извините, нет поддержки Web Storage!";
}
</script>
</body>
</html>
Объект localStorage
Объект localStorage хранит данные без срока действия, поэтому они сохраняются после закрытия браузера и доступны на следующий день, неделю или год. Используйте localStorage.setItem() для создания пар имя/значение и localStorage.getItem() для их чтения. Чтобы удалить элемент, используйте localStorage.removeItem("name").
Примечание: Пары имя/значение всегда хранятся как строки, поэтому при необходимости преобразуйте их в другой формат.
Пример
Сохранение и получение значений с помощью localStorage.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Базовое локальное хранилище</title>
</head>
<body>
<p id="result"></p>
<script>
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
// Сохраняем
localStorage.setItem("lastname", "Smith");
localStorage.setItem("bgcolor", "yellow");
// Извлекаем
x.innerHTML = localStorage.getItem("lastname");
x.style.backgroundColor = localStorage.getItem("bgcolor");
} else {
x.innerHTML = "Извините, нет поддержки Web Storage!";
}
</script>
</body>
</html>
Подсчёт кликов с localStorage
Этот пример подсчитывает, сколько раз пользователь нажал кнопку. Сохранённая строка преобразуется в число, чтобы счётчик можно было увеличивать, и, поскольку используется localStorage, счётчик сохраняется между сессиями.
Пример
Счётчик кликов, сохраняющийся между сессиями.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Счётчик localStorage</title>
</head>
<body>
<button onclick="clickCounter()">Нажми меня!</button>
<p id="result"></p>
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
x.innerHTML = "Вы нажали кнопку " + localStorage.clickcount + " раз(а)!";
} else {
x.innerHTML = "Извините, нет поддержки Web Storage!";
}
}
</script>
</body>
</html>
Объект sessionStorage
Объект sessionStorage работает так же, как localStorage, за исключением того, что хранит данные только для одной сессии. Данные удаляются, когда пользователь закрывает эту вкладку браузера.
Подсчёт кликов с sessionStorage
Этот пример подсчитывает, сколько раз пользователь нажал кнопку в текущей сессии, используя sessionStorage.
Пример
Счётчик кликов, действующий только в течение сессии.
Результат: полная HTML-страница
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Счётчик sessionStorage</title>
</head>
<body>
<button onclick="clickCounter()">Нажми меня!</button>
<p id="result"></p>
<script>
function clickCounter() {
const x = document.getElementById("result");
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
sessionStorage.clickcount = 1;
}
x.innerHTML = "Вы нажали кнопку " + sessionStorage.clickcount + " раз(а) в этой сессии!";
} else {
x.innerHTML = "Извините, нет поддержки Web Storage!";
}
}
</script>
</body>
</html>