切換頁面時切換顯示返回

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

如果您只想使用客戶端功能，那么您將使用cookie ， 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 "";
}

如果您的目標是簡單，您可以決定使用圖書館來幫助您，或者您可以編寫自己的圖書館。 庫的Somce是js-cookie和CookieHandler 。

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

否則，如果要使用服務器存儲狀態，則需要將狀態存儲在數據庫中或服務器端的文件中，但是，使用數據庫顯然優於將數據存儲在服務器上的文件中 -側。 無論哪種方式，您都可以從網頁上使用HTML表單或AJAX發布更改，在應用程序級別在服務器端處理請求，然后在頁面加載和/或請求句柄的回調上處理請求您的頁面狀態。 如果您的用戶能夠更改其他用戶的頁面狀態，則您需要在方案中使用服務器端，或者如果要為同一用戶在不同計算機/瀏覽器中保留數據。

編輯

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

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

然后在頁面加載時，您將能夠使用localStorage.getItem("ProgramState") === "on"公式設置您的ui的狀態