Cookie Simple Example in Javascript

28 Aug by vichu

Cookie Simple Example in Javascript

In the example to follow, we will create a cookie that stores the name of a visitor.

The first time a visitor arrives to the web page, he will be asked to fill in his name. The name is then stored in a cookie.

The next time the visitor arrives at the same page, he will get a welcome message.

For the example we will create 3 JavaScript functions:

  1. A function to set a cookie value
  2. A function to get a cookie value
  3. A function to check a cookie value

A Function to Set a Cookie

First, we create a function that stores the name of the visitor in a cookie variable:

Example


function setCookie(cname, cvalue, exdays) { 
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

 

Example explained:

The parameters of the function above are the name of the cookie (cname), the value of the cookie (cvalue), and the number of days until the cookie should expire (exdays).

The function sets a cookie by adding together the cookiename, the cookie value, and the expires string.


A Function to Get a Cookie

Then, we create a function that returns the value of a specified cookie:

Example

function getCookie(cname) { 
var name = cname + "=";
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);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length,c.length);
}
}
return ""; }

 

Function explained:

Take the cookiename as parameter (cname).

Create a variable (name) with the text to search for (cname + “=”).

Split document.cookie on semicolons into an array called ca (ca = document.cookie.split(‘;’)).

Loop through the ca array (i=0;i<ca.length;i++), and read out each value c=ca[i]).

If the cookie is found (c.indexOf(name) == 0), return the value of the cookie (c.substring(name.length,c.length).

If the cookie is not found, return “”.


A Function to Check a Cookie

Last, we create the function that checks if a cookie is set.

If the cookie is set it will display a greeting.

If the cookie is not set, it will display a prompt box, asking for the name of the user, and stores the username cookie for 365 days, by calling the setCookie function:

Example

function checkCookie() {
var username=getCookie("username");
if (username!="") {
alert("Welcome again " + username);
} else {
username = prompt("Please enter your name:", "");
if (username != "" && username != null) {
setCookie("username", username, 365);
}
}
}
A full working demo of the above cookie example is here at codepen.
Please comment your specific needs so that I will explain it in detail in the upcoming posts.
Featured image source:  joezimjs.com

Byvichu

Love to code and Love to learn. A passionate technology lover who likes to sit with laptop even for weeks :D

Leave a Reply

Your email address will not be published. Required fields are marked *