2

Делаю переключатели фона и цвета для сайта, но появилась загвоздка, не могу сделать, что бы выбранные данные сохранялись при обновлении страницы, пробовал использовать 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>

2 ответа 2

2

тут на so не работает localStorage в сниппетах

У Вас Вот так должно работать:

var switchContainer = $('.switch-container');

switchContainer.on('click', toggle);

localStorage.getItem('nightMode') === "true" && toggle();

function toggle() {
  var body      = $('body'),
      onSwitch  = $('.switch'),
      container = $('.container');
  
  $(this).toggleClass('on-indicator');
  onSwitch.toggleClass('switched-on');
  body.toggleClass('night-mode');
  container.toggleClass('night-mode-text');
  localStorage.setItem('nightMode', 
      body.hasClass('night-mode') ? 'true' : 'false')
}
.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>

4
  • Спасибо за готовое решение! Возможно есть ссылка на статью с описанием "тут на so не работает localStorage в сниппетах" Почему.. ? 23 мар 2019 в 22:47
  • в консоли выпадает причина (blacklisted) 23 мар 2019 в 22:50
  • Возможно подскажете как добавит в этот скрипт например изменение цвета дополнительного элемента например (sidebar) ? 25 мар 2019 в 0:22
  • Да я оцениваю ответы плацем вверх, но пока рейтинг маловат) 2 апр 2019 в 15:38
0

Можно записать в куку и при открытии страницы читать её и если значение куки истина - переключать на новый стиль:

    $( document ).ready(function() {
          var body      = $('body');
          var onSwitch  = $('.switch');
          var container = $('.container');
          var switchContainer = $('.switch-container');

          var x = getCookie('darkteme');
          if (x == 'true') {
              toogleMyClass();
          }
    });

    switchContainer.on('click', function() {
      toogleMyClass();    
   });

   function toogleMyClass(){
      switchContainer.toggleClass('on-indicator');
      onSwitch.toggleClass('switched-on');
      body.toggleClass('night-mode');
      container.toggleClass('night-mode-text');

      if (body.hasClass('night-mode'){
         setCookie('darkteme','true',7);
      }else{
         setCookie('darkteme','false',7);
      }
   }

ну и стандартные ф-ции чтения-записи кук:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {   
    document.cookie = name+'=; Max-Age=-99999999;';  
}
1
  • Интересный вариант! Спасибо большое, есть над чем подумать 24 мар 2019 в 11:16

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.