Делаю переключатели фона и цвета для сайта, но появилась загвоздка, не могу сделать, что бы выбранные данные сохранялись при обновлении страницы, пробовал использовать localStorage, но у меня не выходит. Прошу помочь переделать этот скрипт, что бы он сохранял выбранное действие при обновлении страницы
var switchContainer = $('.switch-container');
switchContainer.on('click', function() {
var body = $('body'),
onSwitch = $('.switch'),
container = $('.container');
$(this).toggleClass('on-indicator');
onSwitch.toggleClass('switched-on');
body.toggleClass('night-mode');
container.toggleClass('night-mode-text');
});
.switch-container,
.switch {
transition: .3s background;
}
body {
background: #eee;
transition: .3s color, .3s background, .3s color;
font-family: 'Arial', sans-serif;
text-align: center;
color: #142634;
}
h2 {
font-size: 36px;
}
p {
line-height: 1.3;
}
.night-mode {
background: #142634;
}
.switch-container {
width: 50px;
height: 25px;
margin: 10rem auto;
border-radius: 30px;
box-shadow: inset 0 0 5px #bbb;
cursor: pointer;
}
.switch {
background: #142634;
height: 25px;
width: 25px;
border-radius: 50%;
transition: .3s margin-left;
}
.switched-on {
margin-left: 25px;
background: #bdc7c1;
}
.on-indicator {
background: #5a666b;
box-shadow: none;
}
.night-mode-text {
color: #bdc7c1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="switch-container">
<div class="switch"></div>
</div>
<div class="container">
<h2>Simple Night Mode Toggle</h2>
<p>
Hit the switch!
</p>
</div>