Cookies in JavaScript

Cookies are variables stored on the visitor's (client's) computer. When the client's browser requests a page the cookies are obtained too. JavaScript can be used to create and retrieve cookie values.

Cookies are often the most efficient method of remembering and tracking preferences, purchases, commissions and other information required to improve visitor and website statistics.

Example

For Name: The first time a visitor arrives to your web page, he or she must fill in her/his name. The name is then stored in a cookie. The next time the visitor arrives at your page, he or she could get a welcome message like "Welcome John Doe!" The name is retrieved from the stored cookie.

For Date: The first time a visitor arrives to your web page, the current date is stored in a cookie. The next time the visitor arrives at your page, he or she could get a message like "Your last visit was on Tuesday September, 04 2013!" The date is retrieved from the stored cookie.

Let's Understand How It Works

The server sends some data to the visitor's browser in the form of a cookie. If the browser accepts the cookie then it is stored as plain text in the visitor's hard drive. And when the visitor arrives at another page of your site then the browser sends the same cookie to the server for retrieval.

We can say a cookie is plain text data records of 5 variables



Expire: The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
Domain: The Domain is the name of our Website.
Path: The path to the directory or web page that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page.
Secure: If this field contains the word "secure" then the cookie may only be retrieved with a secure server. If this field is blank, no such restriction exists.
Name=Value: Cookies are set and retrieved in the form of key and value pairs.

So those are the main components of a cookie.

In JavaScript we can manipulate the cookies using the cookie property of the document. Here we can "Read, Create, Modify and delete" a cookie.

Syntax:

document.cookie = "key1=value1;key2=value2;expires=date";

Now let's do some Live Examples.

Storing Cookies: The simplest way to create a cookie is to assign a string value to the "document.cookie" object, that looks like the syntax above.



The output of storing the cookie will be:



Now we will provide a value for saving here, such as: "C-SharpCorner".



Reading Cookies: It is similar to writing them. Because the value of the "document.cookie" object is the cookie. So you can use this string whenever you want to access the cookie.

The "document.cookie" string will keep a list of "name=value" pairs separated by semicolons, where the name is the name of a cookie and the value is its string value.

You can use the string's split() function to break the string into keys and values as follows:



When we run the code above the browser will show the output as in the following:



Now let's click on Get Cookie. That will show the output:



Our stored cookie is: "C-SharpCorner". And when we click on Om, it will show all cookies as the key is the name and the value is: "C-SharpCorner".



So now let's try to delete it.

Try the given code.

Reading Cookies: Sometimes we want to delete a cookie so that subsequent attempts to read the cookie return nothing. To do this, we just need to set the expiration date to a time in the past.

Use the following code:



Instead of setting the date, see that the new time uses the setTime() function.The output for the code above will be:



By using the name, we can delete a specific cookie.

Do more exercises and ping back your problems.