即使页面刷新，如何让图像不消失答案

【问题标题】：How to get an image to not vanish even when the page refreshes即使页面刷新，如何让图像不消失
【发布时间】：2013-07-25 20:03:19
【问题描述】：

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

这是我的图片展示功能：

<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。
我该怎么做呢？
甚至只是传递一个参数
谷歌“jquery cookies”找到可以设置和读取cookies的jQuery插件。然后让您的document.ready 函数检查 cookie，如果设置了 cookie，则调用 showImage()。
要求代码的问题必须表明对所解决问题的最低理解。 包括尝试过的解决方案、为什么它们不起作用以及预期的结果。

标签： javascript jquery

【解决方案1】：

您可以使用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，如 another question 中所述。

【讨论】：

【解决方案2】：

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}

【讨论】：

当我尝试这个时它说我不能有 $.cookie("showImage", true);在我的点击中

【解决方案3】：

您可以为此使用sessionStorage。

在你的初始化中：

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

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

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

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

【讨论】：

@foobar2023 请注意，在同一会话中离开页面并点击链接稍后返回该页面也会使图像立即可见，除非您从 sessionStorage 中清除“isImage”。也许你想要，也许不是。
我有多个 showImage 函数，我收到一个错误，最后点击的图像是显示给所有人的图像。我的意思是：假设我单击按钮 6，当我单击按钮 5、4、3、2、1 等时，该图像也会保留。我该如何解决？
@foobar2023 您可以在setItem 上存储每个图像的 ID（而不是“1”）。然后检查该值是否存在而不是null。喜欢var isImage3 = sessionStorage.getItem('3'); ...
这就是我所拥有的：'var isImage = sessionStorage.getItem('1');函数 showImage() { sessionStorage.setItem('isImage', '1'); $("#loadingImage").show(); }' 现在它不会在页面刷新时显示
@foobar2023 原始问题 IMO 的范围有点大。我建议您打开一个新问题并在那里显示更多此代码，然后我们可以看看这个问题。