Question

我有一个JS函数，可以在doc准备就绪时显示消息div，然后在单击“关闭”链接时隐藏它。

我想在每次访问用户访问的第一个页面时显示此消息div，然后在此之后永远不会显示该网站中的任何页面视图。

当用户点击网站中的其他网页时，消息div会再次显示，这对每个人来说都很烦人。

我在jQuery中查找了'one'，但我不确定如何用我的低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>

Answer 1

创建一个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");
};

Answer 2

我有一个类似的问题，我希望在用户将鼠标悬停在特定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");
        }
    });
});

Answer 3

我亲自使用过这个：
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

Answer 4

只要未清除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();
    }); 
});

Answer 5

如果您使用会话存储，则可以设置一个值以确定在该会话期间是否访问了某个页面。但由于这是一个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>

阻止div每次会话或访问不止一次

5 个答案: