Can't clear sessionStorage

Question

i'm creating a js only log in form and i want the browser to hold a variable value in its session data. it seems to work but then i cannot clear it when clicking logout button,

here is my code:

var isAuthorised = window.sessionStorage.key("authorised");



var available_user_name = Array("user1", "user2", "user3"),
   available_user_pass = Array("1001", "2002", "3003"),
   UAP = $("#userNameAndPassword");

for (var i = 0; i < available_user_name.length; i++) {
   var user_names = available_user_name[i];
   var user_passws = available_user_pass[i];
   $("#available_accounts").append("<div><div>" + user_names + "</div><div>" + 
 user_passws + "</div></div>");
}

$("#btn").click(function () {
   var user_name = document.getElementById("email").value;
   user_pass = document.getElementById("pwd1").value;
   btn = $("#btn"),
      result = $("#result");

if ($.inArray(user_name, available_user_name) >= 0) {
  if (available_user_name.indexOf(user_name) == 
  available_user_pass.indexOf(user_pass)) {
     result.html("Welcome back : " + user_name);
     result.css({
        "color": "SeaGreen"
     });
     window.sessionStorage.setItem('authorised', 'true');

  } else {
     result.html("You've selected wrong password for username, please try again");
     result.css({
        "color": "crimson"
     });
  }
  } else {
     result.html("This name doesn't registred with us");
      result.css({
         "color": "crimson"
      });
   }
});




setInterval(function check() {



  if (isAuthorised = true) {

     $(".login-wrapper").delay(500).fadeOut(500);
     $(".login-wrapper").removeClass("flex");
     $(".secure-content-wrapper").delay(500).fadeIn(500);
     // console.log("authorised")
  } else {
     // alert('Login details incorrect');
     $(".login-wrapper").fadeIn(500);
     $(".login-wrapper").addClass("flex");
     $(".secure-content-wrapper").fadeOut(500);
     // console.log("not authorised")
  }
 }

 , 200);



$(".logout").click(function (e) {
    sessionStorage.setItem('authorised', 'false');
   sessionStorage.removeItem('authorised');
   console.log(isAuthorised)
});

the var is "isAuthorised" and is getting the value i set as a key about line 19 "window.sessionStorage.setItem("authorised", "true");"

id rather it just be "var authorised = false" and then later call "sessionStorage[authorised] = true;" this to me is cleaner, but i can't figure how to clear this on clicking logout either. any help would be greatly appreciated

Answer 1

Here you have a useless set.

$(".logout").click(function (e) {
   sessionStorage.setItem('authorised', 'false');  // <==== this is useless
   sessionStorage.removeItem('authorised');
   console.log(isAuthorised)
});

Then you never checked the new value, change this function

//var isAuthorised = window.sessionStorage.key("authorised"); <=== remove this line, this is a constant

setInterval(function check() {
  if ( window.sessionStorage.getItem("authorised") ) { //You must check, not use a constant variable
     $(".login-wrapper").delay(500).fadeOut(500);
     $(".login-wrapper").removeClass("flex");
     $(".secure-content-wrapper").delay(500).fadeIn(500);
     // console.log("authorised")
  } else {
     // alert('Login details incorrect');
     $(".login-wrapper").fadeIn(500);
     $(".login-wrapper").addClass("flex");
     $(".secure-content-wrapper").fadeOut(500);
     // console.log("not authorised")
  }
 }
 , 200);