Question

所以我有这个按钮，当它点击时会显示一个图像，但是如果页面被刷新，图像就会消失，我不希望这样。即使页面刷新，我如何让图像保持不变。

这是我的图片显示功能：

<script>

function showImage()
 {
$("#loadingImage").show();      
 };

</script>

这是我的按钮：

<input name="Failure Analysis Lab"  style="white-space:normal;"    
onclick="moveText(this.name);showImage();form1.submit() " 
style="width: 272px; height: 30px;" type="button" 
value="7QKD Failure Analysis Lab" />

Answer 1

点击按钮

You can set and get a cookie like this：

$.cookie("showImage", true);

然后执行以下操作：

$(document).ready(function() 
{
    var image = $('#loadingImage');
    if($.cookie('showImage') {
        image.addClass('image-visible');
    } else {
        image.show();
    }
});

CSS

.image-visible {display: block}

Answer 2

您可以使用sessionStorage。

在你的初学者：

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

if (isImage !== null) showImage();

function showImage() {
    sessionStorage.setItem('isImage', '1');
    $("#loadingImage").show();      
};

如果图像已显示，则值将存储在临时存储中（当浏览器关闭时将被删除 - 如果您希望永久使用localStorage，则会删除。Support goes back to IE8）。然后在刷新时检查值，如果存在，则显示图像。

Answer 3

您可以使用history.pushState()向当前页面添加哈希或参数。当页面加载或重新加载时，您可以检查是否存在并最初显示图像

var hstate = {}; // state object you may or may not want to use
history.pushState( hstate, 'Page Title', '#img' );
// -- or --
history.pushState( hstate, 'Page Title', '?img=true' );

如果需要，您可以先获取当前网址，以便在添加自己的参数时保留现有参数或哈希值。

要支持旧浏览器，请使用History.js中的another question之类的polyfill。

即使页面刷新，如何使图像不会消失

3 个答案: