Урок 26: Работа с локальным хранилищем
Локальное хранилище в браузере предоставляет способ хранения данных в формате ключ-значение на стороне клиента. В этом уроке мы рассмотрим, как использовать localStorage и sessionStorage для сохранения и извлечения данных, а также приведем примеры применения этих методов.
Использование localStorage
localStorage позволяет сохранять данные, которые остаются доступными даже после закрытия и повторного открытия браузера. Данные в localStorage хранятся в виде строк и могут быть доступны из любой вкладки с тем же источником (origin).
Пример использования localStorage:
// Сохранение данных в localStorage
localStorage.setItem('username', 'JohnDoe');
// Получение данных из localStorage
const username = localStorage.getItem('username');
console.log(username); // 'JohnDoe'
// Удаление данных из localStorage
localStorage.removeItem('username');
// Очистка всего localStorage
localStorage.clear();
Использование sessionStorage
sessionStorage похож на localStorage, но хранит данные только в течение одной сессии. Данные удаляются после закрытия вкладки или окна браузера. sessionStorage также хранит данные в виде строк и доступен только в пределах одной вкладки с тем же источником (origin).
Пример использования sessionStorage:
// Сохранение данных в sessionStorage
sessionStorage.setItem('sessionID', '123456');
// Получение данных из sessionStorage
const sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // '123456'
// Удаление данных из sessionStorage
sessionStorage.removeItem('sessionID');
// Очистка всего sessionStorage
sessionStorage.clear();
Примеры применения
Рассмотрим несколько примеров использования localStorage и sessionStorage в реальных приложениях.
Пример 1: Сохранение пользовательских настроек
В этом примере мы создадим простое веб-приложение, которое позволяет пользователю выбрать тему оформления (светлая или темная) и сохраняет выбранную тему в localStorage.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Select Theme</h1>
<button id="light-theme">Light Theme</button>
<button id="dark-theme">Dark Theme</button>
<script src="script.js"></script>
</body>
</html>
// HTML структура создана
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin-top: 50px;
}
body.dark {
background-color: #333;
color: #fff;
}
button {
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
// script.js
document.addEventListener('DOMContentLoaded', () => {
const lightThemeButton = document.getElementById('light-theme');
const darkThemeButton = document.getElementById('dark-theme');
// Загрузка сохраненной темы
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.add(savedTheme);
}
lightThemeButton.addEventListener('click', () => {
document.body.classList.remove('dark');
localStorage.setItem('theme', 'light');
});
darkThemeButton.addEventListener('click', () => {
document.body.classList.add('dark');
localStorage.setItem('theme', 'dark');
});
});
// Тема сохраняется и загружается из localStorage
Пример 2: Сохранение данных формы
В этом примере мы создадим форму, которая сохраняет введенные данные в sessionStorage, чтобы предотвратить потерю данных при случайном обновлении страницы.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Persistence</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Form Persistence</h1>
<form id="data-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
<script src="script.js"></script>
</body>
</html>
// HTML структура создана
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-top: 10px;
}
input {
padding: 10px;
margin-top: 5px;
width: 300px;
}
button {
padding: 10px 20px;
margin-top: 10px;
cursor: pointer;
}
// script.js
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('data-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
// Загрузка данных из sessionStorage
const savedName = sessionStorage.getItem('name');
const savedEmail = sessionStorage.getItem('email');
if (savedName) {
nameInput.value = savedName;
}
if (savedEmail) {
emailInput.value = savedEmail;
}
// Сохранение данных формы в sessionStorage
form.addEventListener('input', () => {
sessionStorage.setItem('name', nameInput.value);
sessionStorage.setItem('email', emailInput.value);
});
// Удаление данных из sessionStorage при отправке формы
form.addEventListener('submit', (event) => {
event.preventDefault();
sessionStorage.removeItem('name');
sessionStorage.removeItem('email');
alert('Form submitted!');
});
});
// Данные формы сохраняются и загружаются из sessionStorage
Упражнения
Упражнение 1: Счетчик кликов
Создайте веб-страницу с кнопкой и счетчиком кликов. Счетчик должен сохраняться в localStorage, чтобы его значение не сбрасывалось после перезагрузки страницы.
Решение:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Click Counter</h1>
<p>Clicks: <span id="click-count">0</span></p>
<button id="click-button">Click Me!</button>
<script src="script.js"></script>
</body>
</html>
// HTML структура создана
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
cursor: pointer;
}
// script.js
document.addEventListener('DOMContentLoaded', () => {
const clickCountSpan = document.getElementById('click-count');
const clickButton = document.getElementById('click-button');
// Загрузка сохраненного значения счетчика
let clickCount = parseInt(localStorage.getItem('clickCount')) || 0;
clickCountSpan.textContent = clickCount;
clickButton.addEventListener('click', () => {
clickCount++;
clickCountSpan.textContent = clickCount;
localStorage.setItem('clickCount', clickCount);
});
});
// Счетчик кликов сохраняется и загружается из localStorage
Объяснение: Мы создали веб-страницу с кнопкой и счетчиком кликов. Значение счетчика сохраняется в localStorage и загружается при перезагрузке страницы.
Упражнение 2: Сохранение выбранного языка
Создайте веб-страницу с выпадающим списком для выбора языка (например, English, Español, Français). Выбранный язык должен сохраняться в localStorage и загружаться при повторном посещении страницы.
Решение:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Language Selector</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Select Language</h1>
<select id="language-selector">
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
</select>
<script src="script.js"></script>
</body>
</html>
// HTML структура создана
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
text-align: center;
margin-top: 50px;
}
select {
padding: 10px;
margin-top: 10px;
}
// script.js
document.addEventListener('DOMContentLoaded', () => {
const languageSelector = document.getElementById('language-selector');
// Загрузка сохраненного языка
const savedLanguage = localStorage.getItem('language');
if (savedLanguage) {
languageSelector.value = savedLanguage;
}
languageSelector.addEventListener('change', () => {
localStorage.setItem('language', languageSelector.value);
});
});
// Выбранный язык сохраняется и загружается из localStorage
Объяснение: Мы создали веб-страницу с выпадающим списком для выбора языка. Выбранный язык сохраняется в localStorage и загружается при повторном посещении страницы.