Introduction to JavaScript Cookies

The user's information is stored by cookies. Normally when a user visits a website, there is no information in the web server . But it is possible to store any user's information through cookies.

Cookie is a normal text file. Whenever a user visits a website, its information is stored as a cookie (text file). This information is stored on the user's computer.

In the future whenever the user requests for that website again, with the user's request, that user's cookie is also sent to the web server.

Thus web server gets the information of that user. Based on this information, the web server is aware of the preferences of that user. Also, the web server can make the necessary changes to web pages based on this information.

JavaScript provides you with the ability to create, read, change, and delete cookies. Document.cookie property is available in JavaScript for this.

Creating Cookies with JavaScript

The general syntax for creating cookies in JavaScript is being given below.

document.cookie = "name = value; expiry-date; path ";

name = value - Whenever you store any information in the cookie, you do this in the name and pair of value. For example, if you want to store the user's ID, you will define "id = 101" for this.

expiry-date - You also set the expiry date of cookies. The date that you define, comes to the date that the cookie will automatically delete. The expiry date is set by expires attribute.

path - By this parameter, you define what the cookie is related to which path. If no path is given then it means that the cookie is related to the current page.

EXAMPLE

Creating a cookie in JavaScript is being explained by the example below.

<!– settingCookies.html –>

<html>

<script type=”text/javascript”>
// Setting cookies
document.cookie = “userName=John;expires=Fri, 26 May 2017 09:00:00 UTC;path=/”;
document.cookie = “Id=101;expires=Fri, 26 May 2017 09:00:00 UTC;path=/”;
document.write(“Cookies are set..”+”<br>”);
</script>

</html>

The above script generates the given output below.

Cookies are set…

Reading Cookies with JavaScript

You can easily read cookies set in JavaScript. For this you assign a document.cookie property to a normal variable. This property returns all cookies set on that page to a pair of name and value.

An example of this is being given below.

<!– readingCookies.html –>

<html>

<script type=”text/javascript”>
document.write(“Reading cookies…”+”<br>”);
// Reading cookies
var myCookie = document.cookie;
document.write(myCookie);
</script>

</html>

The above script returns all cookies set as output to pair in name and value.

Changing Cookies with JavaScript

To make any cookie change in javascript, you create it back with the other values. For example, you can change the cookies created above this way.

<!– chaingingCookies.html –>

<html>

<script type=”text/javascript”>
// Changing cookies
document.cookie=”userName=Sara;expires=Fri, 26 May 2017 9:00:00 UTC;path=/”;
document.cookie=”Id=103;expires=Fri, 26 May 2017 9:00:00 UTC;path=/”;
document.write(“Cookies are changed…”;
</script>

</html>

The above script generates the given output below.

Cookies are changed…

Deleting Cookies with JavaScript

You can recreate that cookie to delete any cookie by JavaScript. You do not value the cookie when you create it again. Also pass in the expires parameter as an old date value.

For example if you want to delete the created userName and Id cookies created above, then you will do this.

<!– deletingCookies.html –>

<html>

<script type=”text/javascript”>
// Deleting cookies
document.cookie=”userName=;expires=Wed, 3 May 2017 09:00:00 UTC;path=/”;
document.cookie=”Id=;expires=Wed, 3 May 2017 09:00:00 UTC;path=/’;
document.write(“Cookies are deleted…”);
</script>

</html>

The above script generates the given output below.

Cookies are deleted… 

A Complete Example of Cookies with JavaScript

<!– javascriptCookieExample.html –>

<html>

<script type=”text/javascript”>
document.cookie = “userName=John;expires=Fri, 26 May 2017 09:00:00 UTC;path=/”;
document.cookie = “Id=101;expires=Fri, 26 May 2017 09:00:00 UTC;path=/”;
document.write(“Cookie are set..”+”<br>”);
document.write(“Reading cookies…”+”<br>”);
var myCookie = document.cookie;
document.write(“Showing cookies..”+”<br>”);
document.write(myCookie+”<br>”);
document.write(“Changing cookies..”+”<br>”);
document.cookie=”userName=Sara;expires=Fri, 26 May 2017 9:00:00 UTC;path=/”;
document.cookie=”Id=103;expires=Fri, 26 May 2017 9:00:00 UTC;path=/”;
document.write(“Cookies are changed…”+”<br>”);
document.write(“Showing cookies..”+”<br>”);
var myCookieAgain = document.cookie;
document.write(myCookieAgain+”<br>”);
document.write(“Deleting cookies..”+”<br>”);
document.cookie=”userName=;expires=Wed, 3 May 2017 09:00:00 UTC;path=/”;
document.cookie=”Id=;expires=Wed, 3 May 2017 09:00:00 UTC;path=/”;
document.write(“Cookies are deleted…”);

</script>
</html>

The above script generates the given output below.

Cookies are set..

Reading cookies..

Showing cookies..

userName=John,Id=101

Changing cookies..

Cookies are changed.

Showing cookies…

userName=Sara,Id=103

Deleting Cookies.

Cookies are deleted.

About Sudhir Kumar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.

Introduction to JavaScript Cookies