无法使sessionStorage正常工作

Question

I have multiple buttons that when they are clicked an image is loaded and the image is supposed to stay there based even when the page refreshes. When I use this the button with the highest setItem value always shows even if I click on other button. How do I fix this?

here is one of the scripts:

<script type="text/javascript">
            var isImage1 = sessionStorage.getItem('2');

            function showImage1() {
            sessionStorage.setItem('isImage1', '2');
            $("#loadingImage1").show();
            $("#loadingImage").hide();
            $("#loadingImage2").hide();
            $("#loadingImage3").hide();
            $("#loadingImage4").hide();
            $("#loadingImage5").hide();
            $("#loadingImage6").hide();

            }
            if(isImage1 == 2) showImage1();

        </script>

and here is one of my buttons:

 <input name="EPL/MECH DESIGN - TECHS" style="white-space:normal"  
   onclick="moveText(this.name);showImage1();form1.submit()" 
 style="width: 275px"  type="button" value="7SBD EPL/Mech. Design Techs" />

Update: I have updated this line

 var isImage1 = sessionStorage.getItem('2');

to

   var isImage1 = sessionStorage.getItem('isIamge1');

but my issue still exists, that the isImage with the largest value stays even when i click the other buttons, so help is still needed.

Answer 1

In your session storage, you are setting the value of the 'isImage1' Item to '2'

sessionStorage.setItem('isImage1', '2');

But in your code to retrieve the value you are actually retrieving the item '2'

var isImage1 = sessionStorage.getItem('2');

You need to change your sessionStorage.getItem to reference 'isImage1'

var isImage1 = sessionStorage.getItem('isImage1');

Then you should get the value you are expecting.

There are loads of good jsfiddles on session storage. you may get some ideas from this one:

http://jsfiddle.net/gabrieleromanato/XLRAH/

Incidently; this is a very small value you are storing, why not store it in a cookie instead?

EDIT:

based on the fact that you have multiple functions exactly like this one, you are better off following Ken's solution, the only thing I would add is a wildcard to turn off the other images:

function showImage(imgNum) {
            sessionStorage.setItem('Image',imgNum);
            $("[id^=loadingImage]").hide();
            $("#loadingImage" + imgNum).show();

}

showImage(sessionStorage.getItem('Image'));

The code in the buttons would then be showImage(1) instead of showImage1();

_Pez

Answer 2

By re-factoring the code a little you can do something like this:

/// setup some vars including max number of images
var maxImages = 6, i = 1, v;

/// now loop through and get the items for each image
for(; i =< maxImages; i++) {
    v = sessionStorage.getItem('isImage' + i);

    /// if in storage, call show image with the number to show
    if (v !== null) showImage(i);
}

/// show image based on number
function showImage(num) {

    sessionStorage.setItem('isImage' + num, '1');
    $("#loadingImage" + num).show();
}

Also note that sessionStorage only deals with strings. So in order to check a specific number you need to convert it to one first parseInt(value, 10); .

But in this case the 1 that we set can be anything - it's just to store some value so sessionStorage doesn't return null .

In the button code you can change it to do this:

<input name="EPL/MECH DESIGN - TECHS" style="white-space:normal"  
onclick="moveText(this.name);showImage(1);form1.submit()" 
style="width: 275px"  type="button" value="7SBD EPL/Mech. Design Techs" />