В пример возьмём сайт с возможностью изменения темы. После смены темы и закрытия страницы сайта выбранная тема пропадёт, будет установлена тема по умолчанию. В таких случаях разработчики сайтов используют локальное хранилище LocalStorage или кукис файлы. В данной теме я расскажу о локальном хранилище.
Проект - https://github.com/NELIT2714/LocalStorage
Создадим структуру сайта. Сделаем 3 css файла (основной, тёмная тема и светлая тема). Создадим кнопку на экране и напишем ей пару стилей. По нажатии на кнопку будем менять у link css название файла с light.css на dark.css, затем сохранять значение в локальное хранилище.
Получилось что то такое:
Код:
Получилось что то такое:
Код:
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/css/light.css">
</head>
<body>
<div class="change-style-inner">
<button class="change-style-btn">Dark Style</button>
</div>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS:
@import url(light.css);
@import url(dark.css);
* {
margin: 0;
padding: 0;
}
.change-style-inner {
display: flex;
justify-content: center;
margin-top: 100px;
}
.change-style-btn {
padding: 8px 20px 8px 20px;
border: none;
border-radius: 15px;
cursor: pointer;
transition: 0.3s;
}
.change-style-btn:hover {
background-color: blueviolet;
color: white;
JavaScript:
const change_style_btn = document.getElementById('change-style')
const link_css = document.querySelector('link')
change_style_btn.addEventListener('click', change_style)
function change_style() {
if (link_css.getAttribute('href') == 'assets/css/light.css') {
change_style_btn.textContent = 'Light Style'
link_css.setAttribute('href', 'assets/css/dark.css')
} else if (link_css.getAttribute('href') == 'assets/css/dark.css') {
change_style_btn.textContent = 'Dark Style'
link_css.setAttribute('href', 'assets/css/light.css')
}
}setItem(ключ, значение) - установить значение ключу
getItem(ключ) -получить значение ключа
При работа с LocalStorage нам понадобится знать стандартные команды (написал те, которые будут использоваться)
Внимание: ключ нужно указывать такой, что бы он не использовался на других сайтах.
Создадим функцию check_style(), которая будет проверять значения ключа, если его не будет, она создаст его и даст значения "light"
Изменим функцию смены стиля change_style()
Обязательно делаем вызов функции change_style() в коде.
Так выглядит полный js код
getItem(ключ) -получить значение ключа
При работа с LocalStorage нам понадобится знать стандартные команды (написал те, которые будут использоваться)
Внимание: ключ нужно указывать такой, что бы он не использовался на других сайтах.
Создадим функцию check_style(), которая будет проверять значения ключа, если его не будет, она создаст его и даст значения "light"
JavaScript:
function check_style() {
if (localStorage.getItem('style_gide_bh') == 'light') {
link_css.setAttribute('href', 'assets/css/dark.css')
change_style_btn.textContent = 'Light Style'
} else if (localStorage.getItem('style_gide_bh') == 'dark') {
link_css.setAttribute('href', 'assets/css/light.css')
change_style_btn.textContent = 'Dark Style'
} else if (localStorage.getItem('style_gide_bh') == null) {
localStorage.setItem('style_gide_bh', 'light')
}
}Изменим функцию смены стиля change_style()
JavaScript:
function change_style() {
if (localStorage.getItem('style_gide_bh') == 'light') {
localStorage.setItem('style_gide_bh', 'dark')
check_style()
} else if (localStorage.getItem('style_gide_bh') == 'dark') {
localStorage.setItem('style_gide_bh', 'light')
check_style()
}
}Обязательно делаем вызов функции change_style() в коде.
Так выглядит полный js код
JavaScript:
const change_style_btn = document.getElementById('change-style')
const link_css = document.querySelector('link')
change_style_btn.addEventListener('click', change_style)
check_style()
function change_style() {
if (localStorage.getItem('style_gide_bh') == 'light') {
localStorage.setItem('style_gide_bh', 'dark')
check_style()
} else if (localStorage.getItem('style_gide_bh') == 'dark') {
localStorage.setItem('style_gide_bh', 'light')
check_style()
}
}
function check_style() {
if (localStorage.getItem('style_gide_bh') == 'light') {
link_css.setAttribute('href', 'assets/css/dark.css')
change_style_btn.textContent = 'Light Style'
} else if (localStorage.getItem('style_gide_bh') == 'dark') {
link_css.setAttribute('href', 'assets/css/light.css')
change_style_btn.textContent = 'Dark Style'
} else if (localStorage.getItem('style_gide_bh') == null) {
localStorage.setItem('style_gide_bh', 'light')
}
}Проект - https://github.com/NELIT2714/LocalStorage
Последнее редактирование:
