JavaScript: Working With Cookies

This is a simple lesson that has all what you need to know about web cookies using JavaScript. In this lesson, we will learn the following:

• What is a Cookie.
• How to Create them.
• Setting Expiry Date of a Cookie.
• View a Cookie using JavaScript.
• Deleting a Cookie.

What is a Cookie?

The correct question to ask is 'What is a Web Cookie?'.
A web cookie is a small piece of text that is created by a web site's
and sent to the user's computer and stored temporarily. The main functionality
of the web cookie is to provide a state for the stateless web pages.

A web cookie has 3 main components:

• Name.
• Value.
• Zero or more pairs of key/value.

Here is an example of a web cookie:


my_name = ibrahim

This is the most simplest cookie that can be created. It has the name 'my_name'
and a value of 'ibrahim'.

Creating Cookies

It is very simple to create cookies with JavaScript. The following syntax can
be used to create the previous cookie:


document.cookie = "my_name = ibrahim";

Including Other Data on a Cookie
When a cookie is created, it is better to specify an expiry date for it.
If we do not specify an expiry date, the cookie will be deleted once the
browser window is closed. Expiry date is considered as key/value pair


document.cookie = "my_name = ibrahim; expires = Sat, 04 Feb 2017 19:43:41 UTC";

It is good practice to set the time to UTC (Coordinated Universal Time) since the visitors of a web site may have different time.

Custom Expiry Time

To make a cookie expire after specific time, we can use 'Date' object to to that.


//create new date object

var date = new Date();

//we want our cookie to expire after 5 days

var days = 5

var currentTime = date.getTime()

/*


note that 1 second = 1000 milliseconds

and 1 minute has 60 seconds and

one hour has 60 minutes and one day has 24 hours.

5 days = 1000*60*60*24*5 = 432000000 milliseconds

If we want from our cookie to expire after 2 hours, we set

the time to (current time + 1000*60*120)


*/

date.setTime(currentTime + 1000*60*60*24*days);

document.cookie = "my_name = ibrahim; expires = "+date.toUTCString();

In order to update the content of the cookie, we use the same syntax that is used
to create a cookie.


//this is our new cookie

document.cookie = "my_name = ibrahim; expires=Sat, 04 Feb 2017 19:43:41 GMT";



//this is the same cookie with new value

document.cookie = "my_name = ali; expires=Sat, 04 Feb 2017 19:43:41 GMT";



Viewing Cookies

To view all cookies for the web site, we simply use the following:


allCookies = document.cookie;

console.log(allCookies);

What we get is actually a string of text that shows all the available cookies that
is sent by the web site. To get specific cookie value, we have to build a function
that can split cookies.

Deleting Cookies

To delete a cookie, we have only to update the expiry date of the cookie to a date that'd
has been passed. But before we delete a cookie, we have to set the 'path' value of the cookie.
some browsers does not allow the deletion of a cookie with no path.



//create cookie

document.cookie = "my_name = ibrahim; expires = Sat, 04 Feb 2030 19:43:41 UTC;path=/";

//delete cookie

document.cookie = "my_name = ibrahim; expires = Sat, 04 Feb 2010 00:00:00 UTC;path=/";


Source: Programming Academia