HTML5. Web Storage - Веб-сховище

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



HTML веб-сховище; краще ніж cookies.


Що таке HTML веб-сховище?

За допомогою веб-сховища веб-програми можуть зберігати дані локально в браузері користувача.

До специфікації HTML5, дані додатків повинні були зберігатися в куках (cookies), включених до кожного запиту сервера. Веб-сховище є більш безпечним, і великі обсяги даних можуть зберігатися локально, не впливаючи на роботу веб-сайту.

На відміну від файлів cookie, ліміт сховища набагато більший (принаймні 5 МБ), й інформація ніколи не передається на сервер.

Веб-сховище - для кожного джерела (для домену та протоколу). Усі сторінки з одного джерела (однакового походження) можуть зберігати й отримувати доступ до тих самих даних.


Підтримка браузерами

Цифри в таблиці визначають першу версію браузера, яка повністю підтримує веб-сховище.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML Об'єкти веб-сховища

Веб-сховище HTML забезпечує два об'єкти для зберігання даних на боці клієнта:

Перед використанням веб-сховища перевірте підтримку браузера localStorage і sessionStorage:

if (typeof(Storage) !== "undefined") {
  // Код для localStorage/sessionStorage.
} else {
  // Вибачте! Підтримка веб-сховища відсутня.
}

Об'єкт localStorage

Об'єкт localStorage зберігає дані без дати закінчення терміну дії. Дані не будуть видалені під час закриття браузера і будуть доступні наступного дня, тижня або року.

Приклад:

// Зберігаємо
localStorage.setItem("lastname", "Smith");

// Отримуємо
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Спробуйте самі »

Пояснення прикладу:

Наведений вище приклад також може бути написаний таким чином:

// Зберігаємо
localStorage.lastname = "Smith";
// Отримуємо
document.getElementById("result").innerHTML = localStorage.lastname;

Синтаксис для видалення елемента "lastname" localStorage є наступним:

localStorage.removeItem("lastname");

Примітка: Пари name/value завжди зберігаються як рядки. Не забувайте конвертувати їх в інший формат, коли це необхідно!

Наступний приклад підраховує кількість натискань користувачем кнопки. У цьому коді рядок значень перетворюється на число, щоб мати можливість збільшити лічильник:

Приклад:

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ви натиснули кнопку " +
localStorage.clickcount + " раз(ів).";
Спробуйте самі »

Об'єкт sessionStorage

Об'єкт sessionStorage дорівнює об'єкту localStorage, окрім того, що він зберігає дані лише для одного сеансу. Дані видаляються, коли користувач закриває певну вкладку веб-браузера.

У наступному прикладі підраховується кількість разів, коли користувач натиснув кнопку у поточній сесії:

Приклад:

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ви натиснули кнопку " +
sessionStorage.clickcount + " раз(ів) в цій сесії.";
Спробуйте самі »


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.