这是使用 localStorage 的正确方法吗？

Question

我希望能够使用元素切换主题。主题存储在不同的 .css 文件中，通过选择不同的 <option>，我可以依次选择不同的主题。但是，切换页面会将主题切换回我当前写入实际模板的任何内容。这是我的 .js 文件：

$(function() {
    var theme = $("#theme");
    var getTheme = localStorage.getItem("theme");
    
    
    $("#select option:selected").each(function() { /* Switch on-change function */
        if (getTheme == $(this).data("theme")) {
            theme.attr("href", getTheme); /* Set the theme of the page to whatever theme applies to this option */
            console.log($(this).data("theme"));
        }
        else {
            theme.attr("href", $(this).data("theme"));
            localStorage.setItem("theme", $(this).data("theme")); /* Store the choice into local storage; should persist upon page reload */
            console.log($(this).data("theme"));
        }
    });
});

这是我的模板：

<div style="text-align: center">
  <select class="form-control" name="select" id="select">
      <option selected value="original" data-theme="/static/styles.css">Original</option>
      <option value="darkmode" data-theme="/static/stylesdark.css">Dark Mode</option>
      <option value="cybermode" data-theme="/static/stylescyber.css">Cyber Mode</option>
      <option value="fire" data-theme="/static/stylesfire.css">Fire & Brimstone</option>
  </select>
</div>

我认为我的错误与我对 localStorage 的使用方式的处理方式有关，但我不确定如何处理。

Answer 1

你的代码[对我来说]看起来很复杂

只是做

<div style="text-align: center">
  <select class="form-control" name="select" id="select">
    <option value="/static/styles.css"     > Original      </option>
    <option value="/static/stylesdark.css" > Dark Mode      </option>
    <option value="/static/stylescyber.css"> Cyber Mode      </option>
    <option value="/static/stylesfire.css" > Fire & Brimstone </option>
  </select>
</div>

const theSelect = document.querySelector('#select')

theSelect.value = localStorage.getItem('theme') || theSelect.options[0].value 

theSelect.onchange = e =>
  {
  localStorage.setItem('theme', theSelect.value)
  }

Answer 2

你的代码比它需要的复杂得多

$(function() {

  var theme = $("#theme");
  var select = $("#select");

  function setStyleSheet(selectOption) {
    // use local storage, if no value, use default
    var themeHref = localStorage.getItem("theme") || "/your/default.css";
    // update the stylesheet
    theme.attr("href", themeHref);
    // if we need to, update the option with the value from local storage
    if (selectOption) {
      select.find('option[data-value="' + themeHref + '"]').prop('selected', true);
    }
  }

  // bind change event to the select
  select.on('change', function() {
    // grab selected option
    var theme = select.find("option:selected").data("theme");
    // update local storage
    localStorage.setItem("theme", theme);
    // update the style sheeet
    setStyleSheet(false);
  });

  // update the stylesheet on page load
  setStyleSheet(true);

});

如果您使用值而不是数据属性，这将更加简单。

$(function() {

  var theme = $("#theme");
  var select = $("#select");

  function setStyleSheet(selectOption) {
    // use local storage, if no value, use default
    var themeHref = localStorage.getItem("theme") || "/your/default.css";
    // update the stylesheet
    theme.attr("href", themeHref);
    // if we need to, update the option with the value from local storage
    if (selectOption) {
      select[0].value = themeHref;
    }
  }

  // bind change event to the select
  select.on('change', function() {
    // grab selected option's value
    var theme = this.value;
    // update local storage
    localStorage.setItem("theme", theme);
    // update the style sheeet
    setStyleSheet(false);
  });

  // update the stylesheet on page load
  setStyleSheet(true);

});