SessionStorage导航

Question

Greets, so I I'm trying to learn jquery/javascript storage and ran into an issue where I am building a navigation that should remember and place you where you last were if you refresh the page (that's why i use sessionStorage rather then localStorage).

But I can't seem to change the sessionStorage variable to the new location, nor figure out a functional way to get the user back on refreshing the page.

This is what I currently have.

$(function() {

sessionStorage.setItem('position', '.first');
var location = sessionStorage.getItem('position');

$('li', this).click(function() {
    cls = $(this).text();

    if('.' + cls != location) {

        $(location).slideToggle(400);
        $('.' + cls).delay(400).slideToggle(400);

            sessionStorage.setItem('position', '.' + cls)
            console.log(location)
    };
  });
});

https://jsfiddle.net/Unkn0wn96/ndj9sqpe/

The code works in an very odd way, rather then how it's intended, including never changing the value when I console.log(location).

I made some further testing on this and found a 'more' working way in the was that the sessionStorage does change to something, yet it not being usefull.

https://jsfiddle.net/Unkn0wn96/nkbtykkr/

but yet, they elements don't toggle as they should, including that when I console log sessionStorage.position it returns NaN. Also for some odd reason I can't store sessionStorage.position within a variable, it just refuses to change its value. I have no clue why this is happening.

Answer 1

So I was finally able to solve my issue with sessionStorage, since there was not much of help I'd assume the information regarding the case was limited and so wish to share my solution. All thought it does not work fully as intended it does execute it's main function.

$(function() {

  $('button').on('click', function() {
  var msg = '.'+$(this).text();

    localStorage.setItem('color', 'blue') //Default (does not matter since the if statement does not register)

  if(msg != '.' + localStorage.color) { // DOES NOT REGISTER

    if(localStorage.length > 0) {
       localStorage.removeItem('color')
       console.log('localStorage.length : ' + localStorage.length)
    };

            localStorage.setItem('color', msg)
      console.log(localStorage.color)
      } else {
      console.log('cancelled')
      }
});
});

https://jsfiddle.net/mdqjoz69/4/

So what I finally was able to achieve was to make a localStorage key change it's value regarding of what button you press.

What I failed to achieve was being able to check the stored data to not execute whenever you store something that have already been stored. There might be a work around for this. But since the code serves its main purpose I'll let it slide.