ページを切り替えるときにスイッチ表示を戻す

Question

私はオンラインで見つかったものに基づいてスイッチを作ったので、途中で問題が発生しました。スイッチを「オン」状態にすると、それを変更する必要がある変数が正しく変更され、スイッチは正しいモードであることも表示します。しかし、私が別のページに戻ったり、戻ったりすると、そのスイッチは、それを変更しなければならない変数が実際に記憶されているにもかかわらず、スイッチをオンにしていないように見えます。

私はページが変数の値を「上」、それが上であるかのように、常にスイッチを表示し、常に表示されますしている場合ことを見ているように、私はHTML、CSSおよびJavaScriptを使用してそれを作ることができますどのように思っていましたそうでない場合には「オフ」状態になる。

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

を使用してこれを実行したい場合はここで

は、私が使用していたコードですクライアント側の機能のみ、 n cookies、localStorageまたはsessionStorageのいずれかを使用します。

Javascript Cookieを使用する場合は、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 ""; 
} 

あなたは簡単にするために目指す場合はあなたを助けるために、ライブラリを使用することを決定することができ、またはあなた自身を書くことができます。図書館の所在地はjs-cookieとCookieHandlerです。

ローカルストレージを使用する場合は、値を格納するために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"使用して、あなたのUIの状態を設定することができるようになります：

EDITあなたの特定のケースについては

、あなたはこのような何かを行うことができます式