javascript - 切换页面时切换显示回转

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或 session 存储。

如果您决定使用 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，那么您将使用 localStorage.setItem("yourKey", "yourValue") 来存储值，并使用 localStorage.getItem("yourKey") 加载值。如果您打算删除元素，那么 localStorage.removeItem("yourKey") 将非常方便。存储在 localStorage 中的元素不会过期。 sessionStorage 在概念和用法上与 localStorage 非常相似，最显着的区别是 sessionStorage 将在 session 过期时过期。

否则，如果您想使用服务器存储状态，那么您需要将状态存储在 database 中。或者服务器端的文件，但是，使用数据库显然优于将数据存储在服务器端的文件中。无论采用哪种方式，您都需要使用HTML form从网页发布您的更改。或AJAX ，在应用程序级别的服务器端处理请求，然后在页面加载和/或 callback 上处理请求。您的请求处理页面的状态。如果您的用户能够更改其他用户的页面状态，那么您的场景中将需要服务器端，或者如果您想在同一用户的不同计算机/浏览器之间保留数据。

编辑

对于您的具体情况，您可以执行以下操作:

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

然后在页面加载时，您将能够使用 localStorage.getItem("ProgramState") === "on" 公式设置用户界面的状态