using javascript to display an image

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 the开发者_JS百科re even I go to another page and back.

Any helps are appreciated.

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";
}

Save your state in a session if it's possible.