LocalStorage и SessionStorage в JavaScript
В сфере веб-разработки эффективное и безопасное хранение данных на стороне клиента имеет первостепенное значение. JavaScript предоставляет два мощных инструмента для этих целей: LocalStorage и SessionStorage. В этой статье мы подробно рассмотрим эти технологии, предложим практические примеры кода и экспертные рекомендации, которые помогут разработчикам максимально эффективно использовать их возможности.
WARNING
Никогда не храните конфиденциальную информацию или персональные данные в localStorage или sessionStorage без шифрования!
Понимание LocalStorage в JavaScript
LocalStorage позволяет сохранять данные в браузере пользователя постоянно, без срока действия. Это означает, что данные, сохраненные в LocalStorage, останутся доступными даже после закрытия и повторного открытия окна браузера.
Как использовать LocalStorage
Ниже приведен простой пример, демонстрирующий, как сохранять данные в LocalStorage. Вы можете установить любую пару «ключ-значение» с помощью метода setItem, а прочитать значение по ключу — с помощью метода getItem. Также существует метод removeItem для удаления пары по ключу. API предоставляет метод clear() для удаления всех элементов, key(index) для доступа к элементам по индексу, свойство length для подсчета сохраненных элементов и обработчик события storage для отслеживания изменений между вкладками.
note
LocalStorage operations are synchronous and run on the main thread, which can block UI rendering during large data operations.
Практическое применение: Создание переключателя тем с помощью LocalStorage
Представьте ситуацию, когда вы хотите сохранить предпочитаемую пользователем тему (светлую или темную), чтобы она сохранялась между сеансами.
Следующий пример объединяет HTML, CSS и JavaScript в один блок для удобства.
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.5s, color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function toggleTheme() {
var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
if (currentTheme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
}
function loadTheme() {
var theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}
// Initial theme load
loadTheme();
</script>
</body>Этот скрипт проверяет наличие сохраненной темы в LocalStorage или использует тему 'light' по умолчанию. Затем он применяет тему, устанавливая имя класса для корневого элемента HTML, что позволяет CSS соответствующим образом изменить стили.
SessionStorage: Временное хранение данных в JavaScript
В то время как LocalStorage предназначен для хранения данных без срока действия, SessionStorage предоставляет способ хранения данных на протяжении всей сессии страницы. Данные, сохраненные в SessionStorage, очищаются по завершении сессии страницы, то есть при закрытии вкладки или окна.
Как использовать SessionStorage
Ниже приведен базовый пример использования SessionStorage. Как видите, методы и синтаксис очень похожи на localStorage. Разница заключается только в механизме истечения срока действия, как объяснялось выше.
Пример: Использование SessionStorage в функции автосохранения данных формы
Представьте, что у вас есть форма, которую пользователь может заполнить, но существует риск, что он случайно закроет браузер. Вы можете использовать SessionStorage для временного сохранения данных формы.
<body>
<div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
<br />
<input type="email" id="email"/>
</body>
<script>
window.onload = function() {
const email = sessionStorage.getItem('email');
if (email) {
alert('email found from session storage: ' + email);
document.getElementById('email').value = email;
}
document.getElementById('email').oninput = function() {
sessionStorage.setItem('email', this.value);
};
};
</script>Этот код автоматически загружает сохраненный адрес электронной почты при загрузке страницы и обновляет элемент в SessionStorage каждый раз при изменении поля ввода. Чтобы протестировать его, нажмите кнопку «Попробовать самостоятельно», введите что-нибудь в поле ввода, а затем обновите страницу. Значение сохранится после обновления.
INFO
Always consider the size limitations before storing any data (typically 5MB for both LocalStorage and SessionStorage).
Заключение
LocalStorage и SessionStorage предлагают мощные возможности для улучшения пользовательского опыта за счет эффективного управления данными в веб-приложениях. Понимая их возможности и ограничения, разработчики могут принимать обоснованные решения о том, как лучше всего использовать эти инструменты в своих проектах.
Практика
Какие из следующих утверждений верны для localStorage и sessionStorage в JavaScript?