Использование webStorage для применения CSS путем переключения класса - PullRequest
Новая
       41

Использование webStorage для применения CSS путем переключения класса

0 голосов
/ 09 июля 2020

У меня есть сайт с двумя кнопками, которые я использую для переключения между темной темой [по умолчанию] и светлой. Я делаю это с помощью директивы :root и переменных CSS, например:

HTML: 

<body>
  <div>
    Here is some text
  </div>

  <br/>

  <button type="button" onclick="lightToggle()">Light Theme</button>
  <button type="button" onclick="darkToggle()">Dark Theme</button>

</body>

CSS: 

:root {
    --bg-color-1: #011627;
}

.light {
    --bg-color-1: #fbfbfb;
}

body {
    background-color: var(--bg-color-1);
}

JS: 

function lightToggle() {
    var element = document.body;
    element.classList.add("light");
}

function darkToggle() {
    var element = document.body;
    element.classList.remove("light");
}

Это хорошо работает для отдельных страниц. Теперь я хотел бы, чтобы тема сохранялась при переходе на другую веб-страницу в том же домене. Я не хочу использовать файлы cookie и не хочу хранить постоянные данные на стороне клиента, поэтому решил, что sessionStorage наиболее подходит для этого. Я добавил setItem в свои HTML и JS, но мне трудно переключить класс light, используя это значение sessionStorage (и я даже не уверен, что это лучшая практика при использовании webStorage?) . Вот откуда я начинаю:

HTML: 

<script>
  sessionStorage.setItem("theme", "dark");

</script>

<body>
  <div>
    Here is some text
  </div>
  <br />
  <button type="button" onclick="lightToggle()">Light Theme</button>

  <button type="button" onclick="darkToggle()">Dark Theme</button>

</body>

CSS (без изменений): 

:root {
    --bg-color-1: #011627;
}

.light {
    --bg-color-1: #fbfbfb;
}

body {
    background-color: var(--bg-color-1);
}

JS: 

function lightToggle() {
    var element = document.body;
    element.classList.add("light");

    sessionStorage.setItem("theme", "light");
}

function darkToggle() {
    var element = document.body;
    element.classList.remove("light");

    sessionStorage.setItem("theme", "dark");
}

Как лучше всего использовать веб-хранилище, чтобы применить class к HTML body?

1 Ответ

1 голос
/ 09 июля 2020

Все нормально, кроме скрипта, который встроен в html. Он всегда будет заменять выбранную вами тему на «темное» значение. Поэтому просто измените этот сценарий, чтобы он считывал текущее значение в хранилище сеанса и применил соответствующий класс. 

    <script>
      var theme = sessionStorage.getItem("theme");
      var element = document.body;
      
      if(theme && theme === 'light'){
        element.classList.add("light");
      }
      else{
        element.classList.remove("light");
      }
    </script>
...