切换页面时切换显示返回

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的状态