Работа с LocalStorage в java script

19.04.2022, 01:55

_Nelit_

Участник форума

Регистрация: 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:

Код:

Document

Dark Style

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

𝕏 Twitter Reddit Telegram Копировать ссылку