javascript - 根据复选框检查和设置 url 变量

Question

我有一个移动网站，我需要为用户提供明亮和黑暗界面的选项。为此，我建立了一个复选框，其样式类似于 iPhone IOS7 开关。正在按预期工作，但现在我想在页面之间传递复选框的状态。

我还使用 bootstrap 作为移动框架。

我已经到处搜索，到目前为止这是我的代码，你能帮我找出为什么不起作用吗？

我需要根据iface-toggle开关的状态设置#indlink链接。并将 href 设置为 ind.html?iface=light 或 ind.html?dark。

控制台日志正确回复了交换机的状态，但由于某种原因，没有更改 href 地址。

我还需要将接收页面上的开关设置为 url 值。我已经知道如何解析 url 变量，并且我计划使用$('indlink').prop('checked', true)。不过，我还没有对此进行测试，但如果您也可以帮助我编写代码，那就太棒了。

代码:

$(document).ready(function() {

  if ($("#iface-toggle").prop("checked")) {
    $("#indlink").attr("href", "ind.html?iface=light");
    console.log("checkbox is checked");
  } else {
    $("#indlink").attr("href", "ind.html?iface=dark");
    console.log("checkbox is not checked");
  }

  $("#iface-toggle").change(function() {
    if (this.checked) {
      $('body').css({
        "background-color": "white",
        "color": "black"
      });
      $('input select textarea').css({
        "color": "white"
      });
      $("#indlink").attr("href", "ind.html?iface=light");
    } else {
      $('body').css({
        "background-color": "#282c32",
        "color": "white"
      });
      $('input select textarea').css({
        "color": "black"
      });
      $("#indlink").attr("href", "ind.html?iface=dark");
    }
  })


});

<div class="navbar-collapse collapse">
  <ul class="nav navbar-nav navbar-right">
    <li><a id="indlink" href="ind.html">Indicators</a>
    </li>
    <li>
      <div class="switch">
        <input id="iface-toggle" class="cmn-toggle cmn-toggle-round" type="checkbox">
        <label for="iface-toggle" class="label-for-check"></label>
      </div>Interface Color</li>
  </ul>
</div>

更新!!!

出于文档目的，这是最终的 Javascript:

if(localStorage.dark == 'true') {
    $('body').css({"background-color": "#282c32", "color": "white"});
    $('input select textarea').css({"color": "black"});
    document.getElementById('iface-toggle').checked = false
} else {
    $('body').css({"background-color": "white","color": "black"});
    $('input select textarea').css({"color": "white"});
    document.getElementById('iface-toggle').checked = true
}

$("#iface-toggle").change(function() {
    if(this.checked) {
        $('body').css({"background-color": "white","color": "black"});
        $('input select textarea').css({"color": "white"});
        localStorage.dark = 'false';
    } else {
        $('body').css({"background-color": "#282c32","color": "white"});
        $('input select textarea').css({"color": "black"});
        localStorage.dark = 'true';
    }
});

Answer 1

如果所有内容都在同一个域上，则可以使用本地存储来保存和检索值

设置:

localStorage.dark = 'true';

获取:

if(localStorage.dark == 'true'){
  //Do This
}

请注意，本地存储仅保存为字符串，因此请确保引号保持正确。