How to keep div hidden after page refresh?

Question

I've a simple show and hide div.

The div automatically loads on loading the page and then you can close the div by clicking close.

Once you refresh the page the div shows up again, how do I code it to once closed, to not open again for say a month.

Thanks in advance.

Ben

This is the code I have so far;

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://innosite.s3.amazonaws.com/cookie/jquery.cookie.js"></script>
<script type="text/javascript">

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').show();
 // shows the slickbox on clicking the noted link  
  $('#slick-show').click(function() {
    $('#slickbox').show('slow');
    return false;
  });
 // hides the slickbox on clicking the noted link  
  $('#slick-hide').click(function() {
    $('#slickbox').hide('fast');
    return false;
  });

 // toggles the slickbox on clicking the noted link  
  $('#slick-toggle').click(function() {
    $('#slickbox').toggle(400);
    return false;
  });
});

</script>
<script type="text/javascript">
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}


//user closes your box
createCookie('mybox',1,30);

//check if the box should be hidden
if (readCookie('mybox')) 
    $('#slickbox').hide();
</script>

Answer 1

Here is a reference. With that tiny code its, probably easier just to start over.

http://www.w3schools.com/js/js_cookies.asp

Answer 2

There was a comment "use a cookie" and then it disappeared, even though it fits the bill perfectly: you can set and read it on the client side. Just ignore it on the server. There's even a jQuery plugin.

Answer 3

You can always just use local storage :

$(function() {

    if (localStorage) { //if local storage
        if (!localStorage.getItem('visited')) { // if not site is visited before
            $('#slickbox').show(); //show element
        }
    } else { //if not local storage use cookies or just show element in old browsers
        $('#slickbox').show();
    }

    // shows the slickbox on clicking the noted link  
    $('#slick-show').click(function() {
        $('#slickbox').show('slow');
        return false;
    });
    // hides the slickbox on clicking the noted link  
    $('#slick-hide').click(function() {
        $('#slickbox').hide('fast');
        localStorage.setItem('visited', true); //set flag, site now visited and element hidden
        return false;
    });

    // toggles the slickbox on clicking the noted link  
    $('#slick-toggle').click(function() {
        $('#slickbox').toggle(400);
        return false;
    });
});​