創建基於會話的cookie，jquery

以下代碼在頁面加載時顯示彈出消息並創建一個cookie，以便當用戶返回頁面時，他們不會看到彈出消息一次。餅乾的壽命是基於時間的。我想修改此代碼，以便Cookie的使用期限基於用戶會話或某一天。任何指導或代碼片段都會很棒。謝謝。創建基於會話的cookie，jquery

鏈接代碼演示：http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD> 
<META content="text/html; charset=windows-1252" http-equiv=Content-Type> 
<SCRIPT type=text/javascript src="jquery-latest.pack.js"></SCRIPT> 

<SCRIPT> 

$(document).ready(function() { 

    //if the cookie hasLaunch is not set, then show the modal window 
    if (!readCookie('hasLaunch')) { 
     //launch it 
     launchWindow('#dialog');   
     //then set the cookie, so next time the modal won't be displaying again. 
     createCookie('hasLaunch', 1, 365); 
    } 

    //if close button is clicked 
    $('.window #close').click(function() { 
     $('#mask').hide(); 
     $('.window').hide(); 
    });  

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    });   


    $(window).resize(function() { 

     var box = $('#boxes .window'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set height and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     box.css('top', winH/2 - box.height()/2); 
     box.css('left', winW/2 - box.width()/2); 

    }); 

}); 

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

function launchWindow(id) { 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 


} 

</SCRIPT> 

<STYLE> 

body { 
    FONT-FAMILY: verdana; FONT-SIZE: 15px 
} 
A { 
    COLOR: #333; TEXT-DECORATION: none 
} 
A:hover { 
    COLOR: #ccc; TEXT-DECORATION: none 
} 
#mask { 
    Z-INDEX: 9000; POSITION: absolute; BACKGROUND-COLOR: #000; DISPLAY: none; TOP: 0px; LEFT: 0px 
} 
#boxes .window { 
    Z-INDEX: 9999; POSITION: fixed; PADDING-BOTTOM: 20px; PADDING-LEFT: 20px; WIDTH: 640px; PADDING-RIGHT: 20px; DISPLAY: none; HEIGHT: 385px; PADDING-TOP: 20px 
} 
#boxes #dialog { 
    PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #ffffff; PADDING-LEFT: 10px; WIDTH: 640px; PADDING-RIGHT: 10px; HEIGHT: 385px; PADDING-TOP: 10px 
} 


.redbox { 
    color: #F00; font-weight: bold; 
} 
.bold { 
    font-weight: bold; 
} 
</STYLE> 




<div id=boxes> 
    <div id=dialog class=window><span class="redbox"> pop up message <A 
href="#" class="bold"> Ok </a> </div> 

<div id=mask> 
</div></div> 

</html>

來源

2012-09-07 MG.

你看到它說：'days'，並在此項設定爲'365'天'createCookie'功能，只需改變這個數字爲'1'。 =>'createCookie（'hasLaunch'，1，1）;'有一天，沒有會話只。 – adeneo

會話Cookie是沒有使用期限的Cookie，所以更改此：

createCookie('hasLaunch', 1, 365);

到：

createCookie('hasLaunch', 1);

來源

2012-09-07 09:24:54 Guffa

更好使用HTML5會話存儲功能，因爲cookie可能會被某些用戶禁用。

你可以試試這個。

var isFirst = sessionStorage.getItem("FIRSTVISIT"); 

if(isFirst == null || isFirst == 'undefined') { 
    sessionStorage.setItem("FIRSTVISIT", "YES"); 
    launchWindow('#dialog'); 
}

來源

2012-09-07 09:28:41 Sark

sessionStorage的問題是它只適用於當前選項卡。如果您需要跨多個標籤工作，這沒什麼用處。假設用戶在另一個選項卡仍處於打開狀態時在新選項卡中打開該站點，那麼sessionstorage將不會應用於該選項卡。 –

謝謝，它最好！ – KingRider

創建基於會話的cookie，jquery

回答

相關問題