세션 기반 쿠키 jquery를 만들려면

다음 코드는 페이지로드시 팝업 메시지를 표시하고 사용자가 페이지로 돌아올 때 팝업 메시지를 한 번 표시하지 않도록 쿠키를 만듭니다. 쿠키의 수명은 시간을 기준으로합니다. 쿠키의 수명이 사용자 세션 또는 하루를 기준으로하므로이 코드를 수정하고 싶습니다. 모든 안내 또는 코드 스 니펫이 유용 할 것입니다. 감사.세션 기반 쿠키 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

때문에 변경이 :

createCookie('hasLaunch', 1, 365);

에 님의

createCookie('hasLaunch', 1);

출처

2012-09-07 09:24:54 Guffa

더 나은 쿠키는 일부 사용자에 의해 사용 중지 될 수 있으므로 HTML5 세션 저장 기능을 사용하십시오.

이렇게하면됩니다.

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

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

출처

2012-09-07 09:28:41 Sark

sessionStorage의 문제점은 현재 탭에만 적용된다는 것입니다. 여러 탭에서 작동해야하는 경우 유용하지 않습니다. 다른 탭이 열려있는 상태에서 사용자가 새 탭에서 사이트를 열면 해당 탭에 해당 세션 저장소가 적용되지 않는다고 가정 해보십시오. –

감사합니다. – KingRider

세션 기반 쿠키 jquery를 만들려면

답변

관련 문제