如何使图像即使在页面刷新时也不会消失

How to get an image to not vanish even when the page refreshes

本文关键字：刷新 消失 图像 何使      更新时间：2023-09-26

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

这是我的图像显示功能：

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

您可以在点击按钮时设置并获得这样的cookie：

$.cookie("showImage", true);

然后执行以下操作：

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

CSS

.image-visible {display: block}

您可以为此使用sessionStorage。

在您的init:中

var isImage = sessionStorage.getItem('isImage');
if (isImage !== null) showImage();
function showImage() {
    sessionStorage.setItem('isImage', '1');
    $("#loadingImage").show();      
};

如果图像已显示，则会将一个值存储在临时存储器中（当浏览器关闭时将被擦除-如果您希望它是永久性的，请使用localStorage。支持返回IE8）。然后在刷新时检查该值，如果存在，将显示图像。

您可以使用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' );

如果需要，可以先获取当前URL，这样在添加自己的参数或哈希时就可以保留现有参数或哈希。

如另一个问题所述，为了支持较旧的浏览器，请使用诸如History.js之类的polyfill。

相关文章：