 |
19.04.2022, 01:55
|
|
Участник форума
Регистрация: 08.11.2021
Сообщений: 109
С нами:
2377035
Репутация:
33
|
|
В пример возьмём сайт с возможностью изменения темы. После смены темы и закрытия страницы сайта выбранная тема пропадёт, будет установлена тема по умолчанию. В таких случаях разработчики сайтов используют локальное хранилище LocalStorage или кукис файлы. В данной теме я расскажу о локальном хранилище.
RSukrE4.png_Nelit_ · 19 Апр 2022 в 00:55' data-fancybox="lb-post-1020325" data-lb-caption-extra-html="" data-lb-sidebar-href="" data-single-image="1" data-src="/proxy.php?image=https%3A%2F%2Fi.imgur.com%2FRSukrE 4.png&hash=5a5f66f3f733b228db21cbbd70cf9fc0" style="cursor: pointer;" title="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'
)
}
}
RSukrE4.png_Nelit_ · 19 Апр 2022 в 00:55' data-fancybox="lb-post-1020325" data-lb-caption-extra-html="" data-lb-sidebar-href="" data-single-image="1" data-src="/proxy.php?image=https%3A%2F%2Fi.imgur.com%2FRSukrE 4.png&hash=5a5f66f3f733b228db21cbbd70cf9fc0" style="cursor: pointer;" title="RSukrE4.png">
Проект - https://github.com/NELIT2714/LocalStorage |
|
|
07.12.2022, 00:38
|
|
Участник форума
Регистрация: 20.08.2019
Сообщений: 124
С нами:
3543579
Репутация:
18
|
|
Сообщение от _Nelit_
В пример возьмём сайт с возможностью изменения темы. После смены темы и закрытия страницы сайта выбранная тема пропадёт, будет установлена тема по умолчанию. В таких случаях разработчики сайтов используют локальное хранилище LocalStorage или кукис файлы. В данной теме я расскажу о локальном хранилище.
Сообщение от Спойлер
Создадим структуру сайта. Сделаем 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'
)
}
}
Смысл поста? Люди не умеют обычную документацию читать?
|
|
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Линейный вид
