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="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</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('Username saved!');
});
// Загрузка значения из localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Username loaded!\n' + `${savedUsername}`);
} else {
alert('No username found.');
}
});
</script>
</body>
</html>
Пример использования sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</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('Data saved in session!');
});
// Загрузка значения из sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Data loaded from session!\n' + `${savedData}`);
} else {
alert('No data found in session.');
}
});
</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', 'This data persists across sessions');
console.log(localStorage.getItem('persistentData')); // "This data persists across sessions"
// Использование sessionStorage
sessionStorage.setItem('temporaryData', 'This data persists only during the session');
console.log(sessionStorage.getItem('temporaryData')); // "This data persists only during the session"
</script>
</body>
</html>
4.4 Области применения
Когда использовать localStorage:
- Хранение данных, которые должны сохраняться между сессиями, таких как пользовательские настройки или предпочтения
- Хранение данных, которые должны быть доступны во всех вкладках и окнах одного домена
- Хранение данных, которые редко изменяются
Когда использовать sessionStorage:
- Хранение временных данных, которые нужны только в течение текущей сессии
- Хранение данных, которые специфичны для текущей вкладки или окна браузера
- Хранение данных, которые должны быть удалены при закрытии вкладки или окна
Безопасность и конфиденциальность
При использовании веб-хранилищ важно учитывать вопросы безопасности и конфиденциальности:
- Шифрование: данные в веб-хранилищах не шифруются по умолчанию. Если нужно хранить конфиденциальную информацию, рекомендуется шифровать данные перед сохранением.
- Кросс-доменные атаки: веб-хранилища работают в пределах одного домена, что предотвращает доступ к данным из других доменов. Однако важно защититься от атак типа XSS (межсайтовый скриптинг), чтобы злоумышленники не могли получить доступ к данным в хранилище.
- Ограничение объема данных: старайтесь хранить только необходимую информацию и регулярно очищать устаревшие данные, чтобы избежать переполнения хранилища.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ