using javascript to display an image

Question

I have an image as follow:
<img id="imgId" src="img/cart.png" style="display: none"/>
When a button is clicked, it calls a JavaScript function to display the image

document.getElementById("imgId").style.display = "inline"

The image is displayed well but it does not show up when I go back from another page.
What I want is after displaying the image, it will be still there even I go to another page and back.
Any helps are appreciated.

Answer 1

You could do it by saving the image "state" in the URL-hash of the page. (The thing after # ).

When displaying the image, do it like this:

document.getElementById("imgId").style.display = "inline";
window.location.hash = "imgIdShown";

And on pageload you run this little piece of code.

if (window.location.hash == "imgIdShown")
{
    document.getElementById("imgId").style.display = "inline";
}

Answer 2

如果可能，将您的状态保存在会话中。