根據複選框檢查和設置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的同一網域內保存和檢索值

集：

localStorage.dark = 'true'; 

得到：

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

請注意，本地存儲只能保存爲字符串，因此請務必將引號保持爲真。

Answer 2

通過在HTML說法正確的網頁，唯一的方法是使用存儲API

使用，如果你想保存這樣的用戶價值的本地存儲的用戶重新啓動設備，他傾向於即使可以還可以收集就像馬特科迪的樣品

---

如果希望把他說的prefrence他隨時重新啓動其瀏覽器中使用會話存儲

集：

sessionStorage.dark = 'true'; 

得到：

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

---

不要忘記刪除不需要的本地存儲localStorage.removeItem("dark")