切換頁面時切換顯示返回

Question

我根據我在網上找到的內容創建了一個切換，並且一路上出現了一些問題。當我將開關按到「開」狀態時，它應該改變的變量被正確地改變，並且開關也顯示它處於正確模式。但是，當我切換到不同的頁面並返回時，即使應該改變它的變量，切換看起來好像還沒有打開，實際上卻被記住了。

我想知道如何使用html，css和javascript使頁面看到，如果變量具有「on」值，它將始終顯示開關，就像它在上面一樣，並始終顯示如果情況並非如此，則處於「關閉」狀態。

這裏是我使用的代碼：

的Javascript：

document.addEventListener('DOMContentLoaded', function() { 
    var checkbox = document.querySelector('input[type="checkbox"]'); 

    checkbox.addEventListener('change', function() { 
    if (checkbox.checked) { 
     ProgramState = "off"; 
     put("weekProgramState", "week_program_state", ProgramState); 
     console.log(ProgramState); 
    } else { 
     ProgramState = "on"; 
     put("weekProgramState", "week_program_state", ProgramState); 
     console.log(ProgramState); 
    } 
    }); 
}); 

CSS：

/* The switch - the box around the slider */ 
.switch { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 27px; 
} 

/* Hide default HTML checkbox */ 
.switch input {display:none;} 

/* The slider */ 
.slider { 
    position: absolute; 
    cursor: pointer; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: #ccc; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 

.slider:before { 
    position: absolute; 
    content: ""; 
    height: 20px; 
    width: 20px; 
    left: 4px; 
    bottom: 4px; 
    background-color: white; 
    -webkit-transition: .4s; 
    transition: .4s; 
} 

input:checked + .slider { 
    background-color: #2196F3; 
} 

input:focus + .slider { 
    box-shadow: 0 0 1px #2196F3; 
} 

input:checked + .slider:before { 
    -webkit-transform: translateX(20px); 
    -ms-transform: translateX(20px); 
    transform: translateX(20px); 
} 

/* Rounded sliders */ 
.slider.round { 
    border-radius: 34px; 
} 

.slider.round:before { 
    border-radius: 50%; 
} 

HTML：

<h3> Program Override 
<label class="switch"> 
    <input type="checkbox"> 
    <div class="slider round"></div> 
</label> </h3> 

Answer 1

如果你想做到這一點使用只有客戶端功能， ñ您將使用cookies,localStorage或sessionStorage。

如果您決定使用Javascript cookies，那麼您需要使用document.cookie。設置其值時，可以設置參數和截止日期。通過這些參數，您可以建立一種存儲信息並重新加載的方法，例如通過參數onoff。默認情況下，當用戶關閉瀏覽器時，Javascript Cookie將過期。有用的功能：

function setCookie(cname, cvalue, exdays) { 
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
    var expires = "expires="+ d.toUTCString(); 
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; 
} 

和

function getCookie(cname) { 
    var name = cname + "="; 
    var decodedCookie = decodeURIComponent(document.cookie); 
    var ca = decodedCookie.split(';'); 
    for(var i = 0; i <ca.length; i++) { 
     var c = ca[i]; 
     while (c.charAt(0) == ' ') { 
      c = c.substring(1); 
     } 
     if (c.indexOf(name) == 0) { 
      return c.substring(name.length, c.length); 
     } 
    } 
    return ""; 
} 

您可以決定使用一個庫，幫助你，如果你的目標是爲了簡單起見，也可以自己編寫。圖書館的Somce是js-cookie和CookieHandler。

如果您決定使用localStorage，那麼您將使用localStorage.setItem("yourKey", "yourValue")來存儲值，並使用localStorage.getItem("yourKey")來加載值。如果你迭代刪除項目，那麼localStorage.removeItem("yourKey")將非常方便。存儲在localStorage中的項目不會過期。 sessionStorage在概念和用法上與localStorage非常相似，最顯着的區別是當會話到期時sessionStorage將到期。

否則，如果要存儲使用服務器的狀態，則需要將狀態存儲在database或服務器端的文件中，但是，使用數據庫明顯優於存儲數據文件在服務器端。無論採取哪種方式，您都需要從網頁上發佈您的更改（使用HTML form或AJAX），在應用程序級別處理服務器端請求，然後在頁面加載和/或請求的callback處理請求您的頁面狀態。如果您的用戶能夠更改其他用戶的頁面狀態，那麼您需要在您的方案中使用服務器端，或者如果您想爲同一用戶持續保存跨不同計算機/瀏覽器的數據。

編輯

至於你的具體情況，你可以做這樣的事情：

localStorage.setItem("ProgramState", "on"); 

，然後在頁面加載，你就可以設置你的用戶界面的狀態，使用localStorage.getItem("ProgramState") === "on"公式