4.1 localStorage і sessionStorage
Веб-сховища дозволяють веб-додаткам зберігати дані у браузері користувача. Це корисно для збереження інформації, яка має залишатися між відвідинами або при навігації сторінками. В HTML5 ввели два основних типи веб-сховищ: localStorage і sessionStorage.
Що таке localStorage?
localStorage — це сховище даних, яке зберігається в браузері користувача на невизначений термін. Дані в localStorage залишаються доступними навіть після закриття браузера і перезавантаження комп'ютера. Це корисно для збереження інформації, яка має залишатися між сесіями, таких як налаштування користувача або дані кошика покупок.
Що таке sessionStorage?
sessionStorage — це сховище даних, яке зберігається в браузері користувача протягом однієї сесії. Дані в sessionStorage доступні лише до тих пір, поки вкладка або вікно браузера відкрито. Це корисно для збереження даних, які потрібні лише протягом однієї сесії, таких як тимчасові дані форми або стан додатка.
Основні методи і властивості
Методи і властивості localStorage та sessionStorage
Обидва типи веб-сховищ мають однаковий API, який включає методи та властивості для роботи з даними:
setItem(key, value): зберігає значення із вказаним ключем.getItem(key): повертає значення, збережене під вказаним ключем.removeItem(key): видаляє значення з вказаним ключем.clear(): очищує всі дані в сховищі.key(index): повертає ключ за індексом.length: повертає кількість пар ключ-значення в сховищі.
4.2 Приклади використання
Приклад використання localStorage:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Введи своє ім’я">
<button id="saveButton">Зберегти</button>
<button id="loadButton">Завантажити</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Збереження значення в localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Ім’я збережено!');
});
// Завантаження значення з localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Ім’я завантажено!\n' + `${savedUsername}`);
} else {
alert('Ім’я не знайдено.');
}
});
</script>
</body>
</html>
Приклад використання sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Введи деякі дані">
<button id="saveSessionButton">Зберегти</button>
<button id="loadSessionButton">Завантажити</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Збереження значення в sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Дані збережено в сесії!');
});
// Завантаження значення з sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Дані завантажено із сесії!\n' + `${savedData}`);
} else {
alert('Дані не знайдено в сесії.');
}
});
</script>
</body>
</html>
4.3 Порівняння localStorage і sessionStorage
Відмінності localStorage і sessionStorage
- Час збереження:
- localStorage зберігає дані на невизначений термін, поки користувач або скрипт явно не видалить їх.
- sessionStorage зберігає дані тільки на час поточної сесії (вкладки або вікна браузера).
- Область видимості:
- Дані в localStorage доступні у всіх вкладках і вікнах одного й того самого домену.
- Дані в sessionStorage доступні тільки в поточній вкладці або вікні.
- Розмір сховища:
- Зазвичай localStorage і sessionStorage мають обмеження в 5-10 МБ на домен, залежно від браузера.
Приклад порівняння використання localStorage і sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Використання localStorage
localStorage.setItem('persistentData', 'Ці дані зберігаються між сесіями');
console.log(localStorage.getItem('persistentData')); // "Ці дані зберігаються між сесіями"
// Використання sessionStorage
sessionStorage.setItem('temporaryData', 'Ці дані зберігаються тільки впродовж сесії');
console.log(sessionStorage.getItem('temporaryData')); // "Ці дані зберігаються тільки впродовж сесії"
</script>
</body>
</html>
4.4 Області застосування
Коли використовувати localStorage:
- Збереження даних, які мають залишатися між сесіями, таких як налаштування користувача або переваги
- Збереження даних, які мають бути доступними у всіх вкладках і вікнах одного домену
- Збереження даних, які рідко змінюються
Коли використовувати sessionStorage:
- Збереження тимчасових даних, які потрібні лише впродовж поточної сесії
- Збереження даних, які специфічні для поточної вкладки або вікна браузера
- Збереження даних, які мають бути видалені при закритті вкладки або вікна
Безпека і конфіденційність
При використанні веб-сховищ важливо враховувати питання безпеки та конфіденційності:
- Шифрування: дані у веб-сховищах не шифруються за замовчуванням. Якщо потрібно зберігати конфіденційну інформацію, рекомендується шифрувати дані перед збереженням.
- Крос-доменні атаки: веб-сховища працюють в межах одного домену, що запобігає доступу до даних з інших доменів. Утім, важливо захиститися від атак типу XSS (міжсайтовий скриптинг), щоб зловмисники не могли отримати доступ до даних у сховищі.
- Обмеження обсягу даних: намагайтеся зберігати тільки необхідну інформацію та регулярно очищувати застарілі дані, щоб уникнути переповнення сховища.
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ