Creating Cookies in JavaScript

Creating Cookies in JavaScript

 

We all use a browser which automatically logs us in to our favorite sites without us having to login manually every time. A cookie is sent from a web site and stored locally on your computer. It is just a piece of data which allows web sites to remember their users. In this post we will learn how to create cookies with JavaScript.

How are cookies stored?

Cookies are stored in name-value pairs i.e. like this,

user = deecoder

This value is stored in a text file. Whenever the site related to this is visited, the cookie is added to the web request. Hence web-server doesn’t have to remember about you.

How to create Cookies in JavaScript?

Cookies can be created by assigning a name-value pair to the document.cookie object. This can be done like this..,

document.cookie="username=Yourname; expires=Wed, 19 Nov 2018 12:00:00 UTC; path=/";     // username, expires, path are called parameters.

Here we have created a cookie for a user ‘Yourname’ and the added an expiry date. Expiry date tell us the time for which a cookie is valid.
Next, we have added a path parameter. It tells the browser what path this cookie belongs to; here it belongs to the current page. Each parameter is separated by a semi-colon.

How does a browser read a cookie?

The document.cookie object can also be used to read a cookie, this can be done like this,

console.log(document.cookie); //It outputs our cookie to console

Or we can access it by storing it in a variable like this,

var c = document.cookie;

Here, it is important to note that the document.cookie return all the cookies stored in one string.

How to modify and delete a cookie?

To modify a cookie you can just assign the cookie object again with new parameter.

document.cookie="username=Yourname; expires=Wed, 19 Nov 2018 12:00:00 UTC; path=/";    

The expiration date can be used for deleting cookies. It can be done by just setting the expiry date to sometime in past.

The domain Parameter

The domain parameter defaults to the host of the page for example www.google.com.

document.cookie="username=Yourname; www.google.com ;expires=Wed, 19 Nov 2018 12:00:00 UTC; path=/";    

 But if we want the cookie to be accessible to the sub domains of host like the google.com/images, the www part of the domain must be left so, instead of the www.google.com we will have the just google.com.

document.cookie="username=Yourname; google.com ;expires=Wed, 19 Nov 2018 12:00:00 UTC; path=/";    

The domain, path, and expires options can be in any order. But, it is not possible to retrieve these parameters from a cookie once they have been set.You may also use function to create or read cookies.

This is all about the creating cookies in JavaScript.


Hope you find this post useful.You may share your thoughts in comment section.

Thanks…!!