3

我有一个 JS 函数，它在准备好的文档上显示一个消息 div，然后在单击“关闭”链接时将其隐藏。

我想在每次访问用户访问的第一页时仅显示此消息 div 一次，然后再不显示该站点中的任何页面视图。

当用户点击站点内的另一个页面时，消息 div 再次显示，这对每个人来说显然很烦人。

我在 jQuery 中查找了“一个”，但不确定如何用我的低 JS 知识来实现​​它。

<script>
$(document).ready(function(){
    $("div#panel").hide();

    var autoTimer = null;

    autoTimer = setTimeout(function(){
        $("div#panel").slideDown("slow");
    },1000);
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
        $("div#close").css("display","none");
    });         
});
</script>
4

5 回答 5

9

创建一个localStorage密钥，在用户到达页面时设置它，并在用户离开页面时删除它：

//On user coming to page:
//Check localStorage on each page visit, if it's null, show your div
if (!localStorage.getItem("visited")) {
    //show the div

    //Set the key
    localStorage.setItem("visited", "true");
}

//clear localStorage on tab close
window.onbeforeunload = function() {
    localStorage.removeItem("visited");
};
于 2013-07-08T20:22:56.263 回答
4

我有一个类似的问题，我想在用户将鼠标悬停在特定的div. 我使用本地存储如下：

$(function() {
    //set a variable <visited=false> in localStorage on page load
    localStorage.setItem("visited", "false");
    //once the mouse is hovered over the <maindiv>
    $(".maindiv").mouseenter(function(){
         //get the variable value from local storage and compare it
        var visit=localStorage.getItem("visited");
        if(visit==="false")
        {
            $(".slide-msg").show();
            //set visited to true 
            localStorage.setItem("visited","true");
        }
    });
});
于 2014-04-24T10:21:03.570 回答
2

我个人使用过这个：
https
://github.com/js-cookie/js-cookie 如此：

//import main js to use this method:
<script src="js/js.cookie.js"></script>
$(document).ready(function(){ 
    //if visited cookie does not equal true, so its first visit:
    if(Cookies.get('visited') != 'true') {
        console.log("first visit");
        //after doing what we want on first visit, we set cookie to true
        Cookies.set('visited', 'true', { expires: 7 });
    } else {
        //so if first visit cookie is true, we do the following:
        console.log("not first visit");
    }
});

我没有尝试过，但还有一个 jquery 版本：
https
://github.com/carhartl/jquery-cookie 我从以下网址找到了这两种方法：
http
://www.electrictoolbox.com/jquery-cookies/ 一个链接从类似的问题发布：
https ://stackoverflow.com/a/8757487/4651567

于 2015-07-25T22:28:56.850 回答
1

只要不清除 Web 浏览器缓存，这将是持久的。

这是我的参考链接：http ://www.w3schools.com/html/html5_webstorage.asp

你可以试试这个：

$(document).ready(function(){
    // Checks to see if it is the first visit on browser open
    if(sessionStorage.firstVisit != true) {
        // Stores visit
        sessionStorage.firstVisit = true;
        $('#panel').show();
    } else {
        $('#panel').hide();
    }
    $("#close").click(function(){
        $("#panel").hide();
    });  
});

会话存储将在每次访问网站时保持加载。

另一种解决方案是将其永久保留，因此如果您希望他们仅在他们第一次从该机器访问该网站时才看到它：

$(document).ready(function(){
    // Checks to see if it is the first visit on browser open
    if(localStorage.firstVisit != true) {
        // Stores visit
        localStorage.firstVisit = true;
        $('#panel').show();
    } else {
        $('#panel').hide();
    }
    $("#close").click(function(){
        $('#panel').hide();
    }); 
});
于 2013-07-08T20:22:06.663 回答
0

如果您使用会话存储，您可以设置一个值来确定在该会话期间是否访问了某个页面。但由于这是一个 HTML 5 功能，您仍然需要使用 cookie 来处理 IE。

<html>
<body onload="bodyOnload()">
<div id="test" style="width: 100px; height: 100px; background: blue;">First Page View</div>
<input type="button" value="Delete Cookie" onclick="deleteCookie()"/>
<script>
// 'Delete' cookie for testing
function deleteCookie()
{
if(typeof(Storage) !== "undefined"){
    sessionStorage.returnVisit = "false";
    console.log("sessionStorage set.");
}
else{
    setCookie("return_visit","false",1);
}
}

//W3 Schools setCookie function
function setCookie(c_name,value,exdays)
{
  var exdate=new Date();
  exdate.setDate(exdate.getDate() + exdays);
  var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
  document.cookie = c_name + "=" + c_value;
}

//W3 Schools getCookie function
function getCookie(c_name)
{
  var c_value = document.cookie;
  var c_start = c_value.indexOf(" " + c_name + "=");
  if (c_start == -1)
  {
    c_start = c_value.indexOf(c_name + "=");
  }
  if (c_start == -1)
  {
    c_value = null;
  }
  else
  {
    c_start = c_value.indexOf("=", c_start) + 1;
    var c_end = c_value.indexOf(";", c_start);
    if (c_end == -1)
    {
      c_end = c_value.length;
    }
  c_value = unescape(c_value.substring(c_start,c_end));
 }
return c_value;
}

//Check return_visit cookie on page load
function bodyOnload()
{
if(getCookie("return_visit") === 'true' || sessionStorage.returnVisit === "true"){
    //Do something if user has already visited page
            var test = document.getElementById("test");
    test.innerHTML = "Welcome Back";
    test.style.background = "red";
}
else
{
    if(typeof(Storage) !== "undefined"){
        sessionStorage.returnVisit = "true";
        console.log('Session Storage set.');
    }
    else{
        setCookie("return_visit","true",1);
    }
}
}

</script>
</body>
</html>
于 2013-07-09T14:15:38.330 回答