Question

我根据我在网上找到的东西进行了切换，并且在整个过程中给了我一些问题。当我按下开关到＆＃34; on＆＃34;状态，它应该改变的变量被正确改变，并且开关也显示它处于正确的模式。但是当我切换到另一个页面并返回时，开关似乎看起来没有打开它，即使应该随之改变的变量实际上确实被记住了。

我想知道如何使用html，css和javascript来实现它，这样页面就会看到如果变量有＆＃34; on＆＃34;值，它将始终显示开关，就好像它已打开一样，并且始终显示在＆＃34; off＆＃34;如果情况不是这样的话。

以下是我正在使用的代码：

使用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 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将过期。

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

修改

至于你的具体情况，你可以这样做：

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

然后在页面加载时，您可以使用localStorage.getItem("ProgramState") === "on"公式

设置ui的状态

切换页面时切换显示返回

1 个答案: