create session based cookie, jquery

Question

the following code displays a pop up message on page load and creates a cookie so that when the user returns to the page they will not see the pop up message once. the cookie's lifespan is based on time. i'd like to modify this code so the cookie's life span is based on the user session or one day. any guidance or code snippets would be great. thanks.

link to code demo: 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>

Did you see where it says `days`, and in the `createCookie` function where you set this to `365` days, just change that number to `1`. => `createCookie('hasLaunch', 1, 1);` for one day, and nothing for session only. — adeneo, Sep 07 '12 at 09:23

score 4 · Accepted Answer · answered Sep 07 '12 at 09:24

4

A session cookie is a cookie without an expiration time, so change this:

createCookie('hasLaunch', 1, 365);

to:

createCookie('hasLaunch', 1);

answered Sep 07 '12 at 09:24

Guffa

687,336
108
737
1,005

score 3 · Answer 2 · answered Sep 07 '12 at 09:28

3

better to use HTML5 session storage function, since cookies may disabled by some users.

you can try like this.

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

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

answered Sep 07 '12 at 09:28

Sark

4,458
5
26
25

The problem with sessionStorage is it only applies to the current tab. That's not helpful if you need it to work across multiple tabs. Say if the users opens the site in a new tab while the other tab is still open that sessionstorage won't apply to that tab. – Panama Jack Oct 04 '15 at 22:52

create session based cookie, jquery

2 Answers2

Linked