switch display turning back when switching pages

Question

I made a switch based on a something I found online, and it gave me some problems along the way. When I press the switch to the "on" state, the variable that it should change is changed properly, and the switch is also displaying that it is in the right mode. But when I switch to a different page and back, the switch appears to look like you have not turned it on, even though the variable that is supposed to change with it, actually did get remembered.

I was wondering how I can make it using html, css and javascript, such that the page sees that if the variable has the "on" value, it will always display the switch as if it were on, and always appear to be in the "off" state if that is not the case.

Here is the code I am using:

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

If you want to do this using only client-side functionalities, then you will either use cookies , localStorage or sessionStorage.

If you decide to work with Javascript cookies, then you will need to work with document.cookie . When you set its value, you can set parameters and expiration date. Via the parameters you can establish a way to store information and reload it, via an onoff parameter, for instance. By default, Javascript cookies will expire when the user closes the browser. Helpful functions:

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=/";
}

and

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 "";
}

You can decide to use a library to help you if you aim for simplicity, or you can write your own. Somce of the libraries are js-cookie and CookieHandler .

If you decide to use localStorage, then you will work with localStorage.setItem("yourKey", "yourValue") to store values and localStorage.getItem("yourKey") to load values. If you itend to remove items, then localStorage.removeItem("yourKey") will be quite handy. Items stored in localStorage will not expire. sessionStorage is very similar in concept and usage to localStorage , with the most notable difference being that sessionStorage will expire when the session expires.

Otherwise, if you want to store the state using the server, then you will either need to store the state in a database or a file on server-side, however, using a database is clearly superior than storing the data in files on server-side. Either way you will go, from the web-page you will need to post your changes either using an HTML form or AJAX , handle the request on server-side at application level and then on page load and/or the callback of your request handle the state of your page. If your user is able to change the state of the pages for other users, then you will need server-side in your scenario, or if you want to persist the data accross different computers/browsers for the same user.

EDIT

As for your particular case, you can do something like this:

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

and then on page load, you will be able to set the state of your ui, using the localStorage.getItem("ProgramState") === "on" formula