How to Create, Read, and Update a Cookie using JavaScript
While working on the redesign of the New York Law Journal, I was tasked with creating a pop-up message that was supposed to appear based on some logic that the business folks had. Basically, the message was supposed to appear once per week, but no more than a total of 8 times, and then should never appear again. In order to make this happen, I employed a few http cookies by way of JavaScript.
The way I ended up thinking about this was:
- The website visitor comes to our site, has no domain cookies, and should see the message once, but not again for another 7 days. Our code at this point should:
- Show the message once
- Set a cookie that will be responsible for showing the message once each week by expiring every 7 days. (7-day cookie)
- Set a cookie that will be responsible for not showing the message after seeing it 8 times. (CookieCounter)
- Once the visitor returns to out site after 7 days, the first cookie we set should expire, and based on that we’ll:
- Show the message again
- Set the 7-day cookie again
- Update a value in the CookieCounter
- Once the visitor has seen the message 8 times, we won’t show it anymore, and we’ll determine this by looking at the CookieCounter value, which should have been updated each time the visitor saw that message.
Using this logic, I went about coding this by first creating the 7-day Cookie, which is a self-invoking function:
(function setMyCookie(){
var cookie = "my7DayCookie";
var my7DayValue = 1;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 7);
var tmp=cookie + "=" + my7DayCookie+ "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp;
})();
Now we want to create a very similar function to create the second CookieCounter cookie:
(function setMyCounterCookie(){
var cookie = "counterCookie";
myCounterCookieValue = 1;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 99999);
var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp2;
})();
The last function we need to create is one that will find the value of a cookie:
function getCookie(cookieValue) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i=0; i<ARRcookies.length; i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x === cookieValue) {
return unescape(y);
}
}
}
And then we assign that value to a variable by running the function and giving it the cookie we’re trying to read as a parameter:
var myCounterCookieValue = getCookie("counterCookie");
Now that we’ve got our two functions that will create and read our cookies for us, we need to start building out our logic and creating these cookies when appropriate. I started this by thinking about the first state that a user would be in: they have no cookies set and have not been to the site. I started by writing some code that went something like this:
Pseudo code: if the user has no cookies, show the message...
I found however that the code for determining if there was NOT a cookie started to get messy and I began running into errors. Instead, I flipped it upside down and started writing something like this instead:
Pseudo code: if the user has both cookies, do nothing, else do something...
Here’s the basic structure of what I ended up with:
if (document.cookie.indexOf("my7DayCookie") >= 0 && document.cookie.indexOf("counterCookie") >= 0){
// Look for our cookies and if found do nothing
} else if (document.cookie.indexOf("60DayCookie") >= 0 && myCounterCookieValue < 8){
// if the Cookie Counter is there and it's value is less than 8, fire the message
} else if (my60DayValue >= 8 ) {
// if the Cookie Counter value is greater than 8, do nothing
} else {
// if none of the above resolve to TRUE, then we know it's a first time visitor, so fire the message, and set both cookies.
}
So, now we have a logic structure and we have our functions for creating cookies, but one final thing we need to think about is how to update the counterCookie. It starts with a value of 1, but needs to update each time the my7DayCookie is reset. We do this by inserting a modified version of our counterCookie creator function in the first “else if” block where we know the counterCookie exists, but the my7DayCookie does not, meaning that the user has seen the message once and the my7DayCookie has expired:
(function setMyCounterCookie(){
var cookie = "counterCookie";
myCounterCookieValue++;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 99999);
var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp2;
})();
In the above code, notice the only difference:
myCounterCookieValue++;
When this function runs, it will take the existing value the counterCookie holds and add 1 to it. When we put it all together, it would look something like this:
function getCookie(cookieValue) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i=0; i<ARRcookies.length; i++) {
x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
x=x.replace(/^\s+|\s+$/g,"");
if (x === cookieValue) {
return unescape(y);
}
}
}
var myCounterCookieValue = getCookie("counterCookie");
if (document.cookie.indexOf("counterCookie") >= 0 && document.cookie.indexOf("my7DayCookie") >= 0){
// BOTH COOKIES PRESENT, SO DO NOTHING
} else if (document.cookie.indexOf("counterCookie") >= 0 && myCounterCookieValue < 8 ){
// SHOW MESSAGE BY INCLUDING MESSAGE CODE HERE
// RESET THE my7DayCookie
(function setMy7DayCookie(){
var cookie = "my7DayCookie";
var my7DayCookieValue = 1;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 7);
var tmp=cookie + "=" + my7DayCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp;
})();
// UPDATE counterCookie, INCREASE ITS VALUE BY 1
(function setMyCounterCookie(){
var cookie = "counterCookie";
myCounterCookieValue++;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 99999);
var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp2;
return myCounterCookieValue;
})();
//console.log("counterCookie Value = " + myCounterCookieValue);
} else if (myCounterCookieValue >= 8 ) {
//DO NOTHING, THE USER HAS SEEN THE MESSAGE 8 TIMES
} else {
// SHOW THE MESSAGE AND SET BOTH COOKIES FOR THE FIRST TIME
(function setMyCookie(){
var cookie = "my7DayCookie";
var my7DayCookieValue = 1;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 7);
var tmp=cookie + "=" + my7DayCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp;
})();
(function setMyCounterCookie(){
var cookie = "counterCookie";
myCounterCookieValue = 1;
var showAgain = new Date();
showAgain.setDate(showAgain.getDate() + 99999);
var tmp2=cookie + "=" + myCounterCookieValue + "; expires=" + showAgain.toGMTString() + "; path=/";
document.cookie=tmp2;
return myCounterCookieValue;
})();
}
I hope this was helpful!