javascript - 无法让 sessionStorage 正常工作

Question

我有多个按钮，当它们被点击时，图像被加载并且图像应该停留在那里，即使页面刷新也是如此。当我使用此按钮时，即使我单击其他按钮，也始终会显示具有最高 setItem 值的按钮。我该如何解决这个问题？

这是其中一个脚本:

<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>

这是我的一个按钮:

 <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" />

更新:我已经更新了这一行

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

到

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

但我的问题仍然存在，即使我点击其他按钮，具有最大值的 isImage 仍然存在，因此仍然需要帮助。

Answer 1

在您的 session 存储中，您将“isImage1”项的值设置为“2”

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

但是在您检索值的代码中，您实际上是在检索项目“2”

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

您需要更改 sessionStorage.getItem 以引用“isImage1”

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

然后你应该得到你期望的值。

session 存储上有很多好的 jsfiddle。你可能会从中得到一些想法:

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

顺便说一下；这是您要存储的一个非常小的值，为什么不将其存储在 cookie 中呢？

编辑:

基于您拥有与此完全相同的多个功能这一事实，您最好遵循 Ken 的解决方案，我唯一要添加的是关闭其他图像的通配符:

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

}

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

按钮中的代码将是 showImage(1) 而不是 showImage1()；

_佩兹