Блог

Я просто пытаюсь сделать так, чтобы при перезагрузке страницы сохранялась пользовательская тематическая таблица стилей, но я предполагаю, что мое использование localStorage неверно. Я пытался рационализировать логику, но мне нужна помощь. Вот моя функция:

 <div style="text-align: left">
    <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input switch" id="original" data-theme="/static/styles.css">
        <label class="custom-control-label" for="original">Original</label>
    </div>
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input switch" id="darkmode" data-theme="/static/stylesdark.css">
      <label class="custom-control-label" for="darkmode">Dark Mode</label>
    </div>
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input switch" id="cybermode" data-theme="/static/stylescyber.css">
      <label class="custom-control-label" for="cybermode">Cyber Mode</label>
    </div>
    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input switch" id="fire" data-theme="/static/stylesfire.css">
      <label class="custom-control-label" for="fire">Fire and Brimstone</label>
    </div>
</div>
    <script>
        $(function() {
            var theme = $("#theme");
            var getTheme = localStorage.getItem("theme");

            theme.attr("href", getTheme);

            $(".switch:not([checked])").change(function() { /* Switch on-change function */
                $(".switch").not(this).prop("checked", false); /* If a switch is checked, every other switch is unchecked  */
                theme.attr("href", $(this).data("theme")); /* Set the theme of the page to whatever theme applies to this option */
                localStorage.setItem("theme", $(this).data("theme")); /* Store the choice into local storage; should persist upon page reload */
            });
        });
    </script>
 

 if (localStorage.getItem('theme') === null) { // it doesnt exist
  //create them and store to storage
}