| Itachi Uchiha |
07.12.2022 00:38 |
Цитата:
Сообщение от _Nelit_
В пример возьмём сайт с возможностью изменения темы. После смены темы и закрытия страницы сайта выбранная тема пропадёт, будет установлена тема по умолчанию. В таких случаях разработчики сайтов используют локальное хранилище LocalStorage или кукис файлы. В данной теме я расскажу о локальном хранилище.
https://i.imgur.com/RSukrE4.png
Цитата:
Сообщение от Спойлер
Создадим структуру сайта. Сделаем 3 css файла (основной, тёмная тема и светлая тема). Создадим кнопку на экране и напишем ей пару стилей. По нажатии на кнопку будем менять у link css название файла с light.css на dark.css, затем сохранять значение в локальное хранилище.
Получилось что то такое:
Код:
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"
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://i.imgur.com/RSukrE4.png
Проект - https://github.com/NELIT2714/LocalStorage
|
Смысл поста? Люди не умеют обычную документацию читать? |
