JavaScript jQuery-复选框样式化为电源按钮并在重新加载网页时更新其状态的问题

Question

[目前，我正在做一个项目：通过网页控制电动机。我的网页将数据发送到S7 1200 PLC，然后S7 1200 PLC将控制电动机。这是我的网页的样子：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9DYjJqTy5qcGcifQ==” alt =“在此处输入图像描述”>

当我单击电源按钮时，它将向PLC发送数据（如果发送1，则PLC启动电动机，否则电动机将停止。电源按钮是复选框类型，我使用css将其设置为类似于按钮的样式。

这是主文件index.html中电源按钮的html代码：

<tr>
        <th align="left" style="text-align:justify" id ="start"> START MOTOR                        
        </th>
        <th class="button off"><span class = "fa fa-power-off"></span><input type="checkbox" id='"webdata".Start'/>
        </th>
    </tr>

这是用于显示电动机是否正在运行的html代码：

<tr>
        <th align="left" style="text-align:justify">STATUS:                 
        </th>
        <th id="Status_Run">STOP                        
        </th>   
    </tr>

这是设置电源按钮样式的css：

.button {
        float: right;
        position: relative;
        height: 55px;
        width: 55px;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: -1px -1px 0px 3px rgb(34,34,34), 
                    0px 7px 20px 3px rgb(17,17,17), 
                    inset 0px 4px 2px 0px rgba(250, 250, 250, .2), 
                    inset 1px -9px 35px 3px rgba(0, 0, 0, .5);
        background-color: rgb(83,87,93);
        top: 1px;
        //color: #fff;
        //text-shadow: 0px 0px 3px rgb(250,250,250);
        outline: none;
        left: -13px;
        transform: translate3d(0,0,0);
        transition: 0.5s;

    } 
    .button input[type=checkbox] {
        -webkit-appearance: none;

    }

    .button.on {
        width: 55px;
        content: "";
        display: block;
        height: 55px;
        position: relative;
        border-radius: 50%;
        //-webkit-box-shadow: inset 0 1px 2px #F83953, inset 0 6px 1px 1px rgba(144, 59, 59,1);
        transform: translate3d(-2px,3px,0);
        transition: 0.5s;
        //top: -2px;
        background-color: rgb(83,87,93);
        box-shadow: 0px 0px 0px 0px rgb(34,34,34), 
                    0px 3px 7px 0px rgb(17,17,17), 
                    inset 0px 0px 0px 3px cyan, 
                    inset 0px -10px 35px 5px rgba(0, 0, 0, .5);

    }

    .button .fa {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 2em;
        color: #0c0c0c;
    }

    .button.on .fa {

        color: aqua;  
        text-shadow:  0px 0px 20px #ffffff, 
                      0px -3px 30px #01bbf8;
        }

这是将数据发送到PLC的Jquery代码：

           var checkbox;
            nodes.forEach(function buttonStatus (buttonControl) {
                if (buttonControl.className == ("button on")) {
                    buttonControl.lastElementChild.checked = true;

                }
                buttonControl.addEventListener("click", function toggleSwitch() {
                    if (buttonControl.className === "button on") {
                        buttonControl.className = 'button off';
                    } else {
                        buttonControl.className = ("button on");
                    }

                    checkbox = buttonControl.lastElementChild;
                    checkbox.checked = !checkbox.checked;
                    url="IO.htm";
                    var ival = +checkbox.checked;
                    var sdata = checkbox.id;
                    //alert(ival);                      
                    sdata=escape(sdata)+'='+ival;
                    alert(sdata);

                    $.post(url,sdata,function(result,status){});

                }, false);
                });

当我单击电源按钮时，class = "button off"变为class = "button on"，电源按钮像我设计的一样发光。它将向IO.htm文件发送请求。该请求看起来像这样：%22webdata.Start%22=1。

这是IO.htm：

<!-- AWP_In_Variable Name='"webdata".Start' --> {"Status" : ":="webdata".Start:"}  

<!-- AWP_In_Variable Name='"webdata".Start' -->允许我将数据写入标签名称“ webdata”。在PLC中启动。如果我向此IO.htm文件发送请求%22webdata.Start%22=1，则标签“ webdata” .PLC中的Start将修改为1，然后电动机开始运行。 :="webdata".Start:允许我查看标签“ webdata” .Start的状态。如果电动机正在运行，则"Status" : 1。

这是将电动机状态更新为我的index.html文件的jQuery代码：

$.ajaxSetup({ cache: false });
   setInterval(function() { 
   url="IO.htm";
   $.getJSON(url, function(result){
                            if(result["Status"]==0) {
                            $('#Status_Run').text("STOP");
                            }
                            else {
                            $('#Status_Run').text("RUNNING");
                            }
                        });
                    },1000);

如果状态为1，则<th id="Status_Run"> </th>中将显示“正在运行”，否则将显示“停止”。

我的问题是，当我单击电源按钮时，该按钮发光，状态显示运行中，并且连接到PLC的电动机也在运行。当我重新加载网页时，class = "button on"现在返回到class = "button off"，状态当然仍然显示为运行中，电机仍在运行中。我只想在重新加载网页时，电源按钮必须保持其发光状态，而状态显示为“正在运行”。我找不到解决方法。

Answer 1

sessionStorage.setItem("state", "off");

$(".button").on("click", function() {
  if (sessionStorage.getItem("state") == "off") {
    sessionStorage.setItem("state", "on");
    $(this).removeClass("off");
    $(this).addClass("on");
  } else {
    sessionStorage.setItem("state", "off");
    $(this).removeClass("on");
    $(this).addClass("off");
  }
}