HTML5 Веб-сховище
HTML веб-сховище; краще ніж cookies.
Що таке HTML веб-сховище?
За допомогою вебсховища вебпрограми можуть зберігати дані локально в браузері користувача.
До появлення специфікації HTML5, дані додатків повинні були зберігатися в куках (cookies), включених в кожному запиті сервера. Вебсховище є більш безпечним, і великі об’єми даних можуть зберігатися локально, не впливаючи на роботу вебсайту.
На відміну від файлів cookie, ліміт сховища набагато більший (принаймні 5 МБ), і інформація ніколи не передається на сервер.
Вебсховище - для кожного джерела (для домену і протоколу). Всі сторінки з одного джерела (однакового походження) можуть зберігати та отримувати доступ до цих самих даних.
Підтримка браузерами
Цифри в таблиці визначають першу версію браузера, яка повністю підтримує вебсховище.
| API | |||||
|---|---|---|---|---|---|
| Веб-сховище | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Об’єкти вебсховища
Вебсховище HTML забезпечує два об’єкта для збереження даних на стороні клієнта:
window.localStorage- зберігає дані без дати закінчення строка дії;window.sessionStorage- зберігає дані для одного сеанса (дані втрачаються при закритті вкладки веббраузера).
Перед використанням вебсховища перевірте підтримку браузером localStorage та sessionStorage:
if (typeof(Storage) !== "undefined") {
// Код для localStorage/sessionStorage.
}
else {
// На жаль, підтримка вебсховища відсутня.
}
Об’єкт localStorage
Об’єкт localStorage зберігає дані без дати закінчення строку дії. Дані не будуть видалені під час закриття браузера і будуть доступні наступного дня, тижня або року.
Приклад
// Зберігаємо
localStorage.setItem("lastname", "Smith");
// Повертаємо
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Спробуйте самі »
Пояснення прикладу:
- Створюємо пару localStorage name/value (ім’я/значення) з name='lastname' и value='Smith';
- Отримуємо значення 'lastname' і вставляємо його в елемент з id='result' (результат).
Наведений вище приклад також може бути написаний таким чином:
// Зберігаємо
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 + " time(s).";
Спробуйте самі »
Об’єкт sessionStorage
Об’єкт sessionStorage відповідає об’єкту localStorage, крім того, що він зберігає дані лише для одного сеансу. Дані видаляються, коли користувач закриває відповідну вкладку веббраузера.
В наступному прикладі підраховується кількість разів, коли користувач натиснув кнопку в поточній сесії:
Приклад
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ви натиснули кнопку " +
sessionStorage.clickcount + " раз(ів) в поточній сесії.";
Спробуйте самі »
