仅在第一次访问时显示 div（cookie？）答案

【问题标题】：Have div display ONLY on first time visit (cookies?)仅在第一次访问时显示 div（cookie？）
【发布时间】：2013-09-25 03:06:03
【问题描述】：

我试图在用户第一次访问我的网站时显示 div。我很确定我是通过使用 cookie 来做到这一点的，我对它的经验有限并且很难理解。我在网上找到的大多数教程只讨论让 cookie 提示用户输入名称之类的内容，然后让它稍后回忆，这根本不是我想要的。我只是想让 cookie 检查用户以前是否访问过我的网站，如果没有，则显示一个通常隐藏的 div。

这是我尝试过但未能开始工作的方法。

HTML：

<head>
   <script type="text/javascript" src="annoy.js"></script>
   <script type="text/javascript" src="scripts.js"></script>
</head>

...
<body>
    <div id="overbox3">
         <div id="infobox3">
              <p>This is the cookie box</p>
              <br />
              <p>it should only show once </p>
              <br/><br/>
         </div><!-- end infobox3 --> 
    </div> <!-- end overbox3 -->
</body>

CSS（不是很相关，因为它可以正常工作）：

#overbox3 {
         position: fixed;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%; 
         background: rgba(64, 64, 64, 0.5);
         z-index: 999999;
         display: none;
    }

    #infobox3 {
        margin: auto;
        position: absolute;
        left: 35%;
        top: 20%;
        height: 300px;
         width: 400px;
        background-color: white;
        border: 1px solid red;
    }

scripts.js的相关内容：

function popbox3() {
    $('#overbox3').toggle();
}

我认为是问题， annoy.js 的内容：

    function GetCookie(name) {
        var arg=name+"=";
        var alen=arg.length;
        var clen=document.cookie.length;
        var i=0;

        while (i<clen) {
            var j=i+alen;
                if (document.cookie.substring(i,j)==arg)
                    return "here";
                i=document.cookie.indexOf(" ",i)+1;
                if (i==0) 
                    break;
        }

        return null;
    }

    var visit=GetCookie("COOKIE1");

    if (visit==null){
    var expire=new Date();

    popbox3();

    expire=new Date(expire.getTime()+7776000000);
    document.cookie="COOKIE1=here; expires="+expire;
}

据我了解，cookie 应该仅在用户未访问时调用函数 popbox3()，这将切换隐藏 div 的显示。但截至目前，没有任何效果。任何澄清或帮助将不胜感激。提前致谢。

【问题讨论】：

如果我访问并删除我的 cookie 会怎样？
另一种方法是使用store.js 来跟踪它。比 cookie 更好的 api/更少的开销。
@RUJordan 我应该澄清一下我不介意。如果有人清除了他们的 cookie，我对再次显示 div 没有任何问题。
@NickTomlin 在查看自述文件并观看 store.js 的截屏视频后，我不确定我是否真的了解如何使用它来解决这个问题？似乎有了它，我必须手动输入值才能存储。您能否详细说明我如何使用它来检测用户是否访问过我的网站，如果不是这样，则执行一个函数？
您是否在$(document).ready() 中运行您的代码？如果没有，您将在首先加载 DIV 之前对其进行切换。您的 cookie 代码看起来不错。

标签： javascript html cookies

【解决方案1】：

您的 cookie 代码看起来不错。您需要在文档就绪处理程序中运行它，以便在切换 DIV 之前等待文档加载：

$(function() {
    var visit=GetCookie("COOKIE1");

    if (visit==null){
        popbox3();
    }
    var expire=new Date();
    expire=new Date(expire.getTime()+7776000000);
    document.cookie="COOKIE1=here; expires="+expire;
}

我还设置了无条件的cookie，这样每次访问网站都会推迟过期时间。

【讨论】：

太棒了，谢谢。澄清一下，这段代码只能替代我原来 annoy.js 中 return null;} 下的所有内容，对吗？
是的。尽管如果您愿意，可以将函数放入其中，以防止它们污染全局命名空间。
我必须？我帮你一次，现在我是你一辈子的奴隶？