页面刷新后如何保持div隐藏？ [英] How to keep div hidden after page refresh?

问题描述

我有一个简单的节目和隐藏div。

I've a simple show and hide div.

div在加载页面时自动加载，然后你可以通过点击关闭来关闭div。

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

刷新页面后div再次显示，如何关闭后再编码，再说一个月不再打开。

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.

提前致谢。

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>

推荐答案

您可以随时使用本地存储空间：

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;
    });
});​

这篇关于页面刷新后如何保持div隐藏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！