CODEWITHSUNDEEP
javascriptjquery
Nam Jayer
Nam Jayer

Reputation: 19

Save event onclick js

I have this code

<script>
    var content = document.getElementById('float_content_right');
    var hide = document.getElementById('hide_float_right');
    function hide_float_right() {

        if (content.style.display == "none") {
            content.style.display = "block";
            hide.innerHTML = '<a href="javascript:hide_float_right()">Close [X]</a>';

        } else {
            content.style.display = "none";
            hide.innerHTML = '<a href="javascript:hide_float_right()">Open...</a>';
        }
    }
    var images = new Array();
    images[0] = "<a href='http://phuongnuochoa.com' target='_blank'><img src='http://thegioidoco.net/gif/1.gif'></a>";
    images[1] = "<a href='http://quattran.com' target='_blank'><img src='http://thegioidoco.net/gif/2.gif'></a>";
    images[2] = "<a href='http://dogoducthien.vn' target='_blank'><img src='http://thegioidoco.net/gif/3.gif'></a>";

    $(images[Math.floor(Math.random() * images.length)]).appendTo('#float_content_right');
    setInterval(function () {
        $('#float_content_right').empty();
        $(images[Math.floor(Math.random() * images.length)]).appendTo('#float_content_right');
    }, 5000);
</script>

And now i want, When I press the Close button the image is hidden, then F5 again the picture is still hidden. And if I don't press the Close button, then when I F5 the image is still there.

Please help me, this is my exercise!

Thanks.

Upvotes: 0

Views: 2268

Answers (1)

Amit Kumar Singh
Amit Kumar Singh

Reputation: 4475

Use session storage in your code. Like this.

On the click of your Close button, set a key in session storage. 

// Save data to sessionStorage
sessionStorage.setItem('imageVisible', '1');

On F5 or page load function call, generally $(document).ready(function(){}), you can check this.

// Get saved data from sessionStorage
var data = sessionStorage.getItem('imageVisible');
if(data == 1)
{
  //show the div containing the image.
}
else
{
  //hide the div containing the image.
}

Upvotes: 1

Related Questions