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

Question

So I have this button, and when its clicked an image is shown, but if the page is refreshed the image disappears, and I don't want that. How do i get the image to stay even when the page refreshes.

here is my image show function:

<script>

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

</script>

and here is my button:

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

What do you mean get the image to stay? You mean you want it to stay displayed? You can use a cookie for this. — Codeman, Jul 25 '13 at 18:47
Google "jquery cookies" to find jQuery plugins that can set and read cookies. Then have your `document.ready` function check the cookie and call `showImage()` if the cookie is set. — Barmar, Jul 25 '13 at 18:50
*Questions asking for code must **demonstrate a minimal understanding** of the problem being solved. **Include attempted solutions, why they didn't work,** and the expected results.* — Jeff Noel, Jul 25 '13 at 18:52
Here foobar, let me help you http://stackoverflow.com/questions/1599287/create-read-and-erase-cookies-with-jquery — user1477388, Jul 25 '13 at 18:53

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

You can set and get a cookie like this on your button click:

$.cookie("showImage", true);

Then do the following:

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

CSS

.image-visible {display: block}

edited May 23 '17 at 12:21

Community

1
1

answered Jul 25 '13 at 18:54

Codeman

12,157
10
53
91

When I try this it says I cant have $.cookie("showImage", true); within my onclick – foobar2023 Jul 26 '13 at 18:32

score 1 · Accepted Answer · answered Jul 25 '13 at 18:56

1

You can use sessionStorage for this.

In your init:

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

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

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

If the image has been shown a value is stored in the temporary storage (will be erased when browser is closed - if you want it to be permanent use localStorage instead. Support goes back to IE8). Then on refresh the value is checked for and if exists the image will be shown.

answered Jul 25 '13 at 18:56

@foobar2023 be aware that leaving the page and following links to come back to it later in the same session will also make the image immediately visible, unless you clear the 'isImage' from sessionStorage. Maybe you want that, maybe not. – Stephen P Jul 25 '13 at 19:58
I have multiple showImage functions, and I am getting an error that the last clicked image is the image that shows for all. And by that i mean this: let says I click button 6 that image stays also for when i click button 5, 4, 3 ,2 1, and so on. How do i fix that? – foobar2023 Jul 25 '13 at 20:45
@foobar2023 you can store an ID for each image on the `setItem` (instead of "1"). Then check if that value exists instead of `null`. Like `var isImage3 = sessionStorage.getItem('3'); ...` – Jul 25 '13 at 20:54
This is what I have: 'var isImage = sessionStorage.getItem('1'); function showImage() { sessionStorage.setItem('isImage', '1'); $("#loadingImage").show(); }' and now it doesn't show on when the page refreshes – foobar2023 Jul 25 '13 at 21:19
@foobar2023 it's a bit put of scope for the original question IMO. I'll suggest you open a new question and show more of this code there and then we can take a look at this problem. – Jul 25 '13 at 21:23
here is the [link](http://stackoverflow.com/questions/17869065/cant-get-sessionstorage-to-work-correctly) to the new question – foobar2023 Jul 25 '13 at 21:34

score 0 · Answer 3 · edited May 23 '17 at 11:57

You can use history.pushState() to add a hash or a parameter to the current page. When the page loads or reloads you can check for the presence and show the image initially

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' );

If needed you can get the current URL first so you can preserve existing parameters or hashes when you add your own.

To support older browsers use a polyfill such as History.js, as mentioned in another question.

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

3 Answers3