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

在会话存储中，您将'isImage1'项的值设置为'2'

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

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

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

您需要将sessionStorage.getItem更改为引用'isImage1'

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

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

会话存储上有很多好的jsfiddles。你可以从这个得到一些想法：

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（）;

_Pez

Answer 2

通过重新分解代码，您可以执行以下操作：

/// 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();
}

另请注意，sessionStorage仅处理字符串。因此，为了检查特定的数字，您需要先将其转换为parseInt(value, 10);。

但在这种情况下，我们设置的1可以是任何内容 - 它只是存储一些值，因此sessionStorage不会返回null。

在按钮代码中，您可以更改它以执行此操作：

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

无法使sessionStorage正常工作

2 个答案: