停止div顯示不止一次每個會話或訪問

我有一個JS功能，顯示文檔準備好的消息div，然後隱藏它，如果'關閉'鏈接被點擊。停止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>

來源

2013-07-08 antistandard

'。一（）'不會在頁面加載提供唯一性。設置一個cookie，使用'localStorage'，或者其他在頁面加載時保持不變的東西。 –

您需要在服務器，本地存儲或會話中存儲該信息。由於web是無狀態的，並且在頁面刷新後不記得任何東西 –

只要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-08 20:22:06 RyanDawkins

您好，感謝您的幫助。我稍微更新了這個問題，因爲當我重新閱讀時有點困惑。我改變的路線是：「我想在每次訪問用戶訪問的第一頁時只顯示一次該消息div，然後再從該網站中查看任何頁面。」 – antistandard

這正是我的代碼:) – RyanDawkins

很酷，抱歉。我無法讓它工作，並不是說它不起作用，我只是不能使它工作。 – antistandard

創建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-08 20:22:56 tymeJV

您好，感謝您的幫助。我稍微更新了這個問題，因爲當我重新閱讀時有點困惑。我改了行是：「我想永遠只格設置每次訪問一次，顯示此消息的第一頁的用戶訪問，然後再在後，該網站的任何頁面查看。」 – antistandard

@ user2562000如果你檢查我的答案，那就是我的做法。 – RyanDawkins

好吧，我會再試一次 – antistandard

如果使用會話存儲，您可以設置一個值來確定某個頁面已期間參觀會話。但由於這是一個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-09 14:15:38 ExceptionLimeCat

我有一個類似的問題，我想展示一個消息框，當用戶將鼠標懸停在特定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-24 10:21:03

你應該檢查localStorage的存在，然後將其設置爲false，否則你在頁面的每次刷新/負荷設置爲false。 \t \t'''如果（localStorage.getItem（「訪問」）！）{ \t \t localStorage.setItem（「訪問」，「假」）; \t \t}''' –

是的。你是對的。但對於我的要求，它是一個單頁的應用程序，所以我希望用戶去用例的在刷新或關閉開始。但是，謝謝）） –

我曾親自使用這樣的：
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"); 
    } 
});

我沒有帶嘗試過，但也thers一個jQuery版本：
https://github.com/carhartl/jquery-cookie
我發現了兩種方法：
http://www.electrictoolbox.com/jquery-cookies/
從一個類似的問題發佈了一個鏈接：
https://stackoverflow.com/a/8757487/4651567

來源

2015-07-25 22:28:56 OB7

停止div顯示不止一次每個會話或訪問

回答

相關問題