01:07
Урок 26: Работа с локальным хранилищем

Курс по программированию на JavaScript

Урок 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();
// 'JohnDoe'

Использование 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();
// '123456'

Примеры применения

Рассмотрим несколько примеров использования 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;
}
// CSS стили добавлены
// 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;
}
// CSS стили добавлены
// 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;
}
// CSS стили добавлены
// 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;
}
// CSS стили добавлены
// 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 и загружается при повторном посещении страницы.

Категория: JavaScript | Просмотров: 13 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: