Hello readers! welcome back to another section of my tutorial on JavaScript. In my last tutorial post we discussed about the JavaScript Event tutorial with examples.
In this tutorial section, we are going to be looking into how to set cookies using JavaScript.
In this tutorial section, we are going to be looking into how to set cookies using JavaScript.
What are Cookies?
Web Browsers and Servers uses HTTP protocol for communication and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session data among the various web pages. For instance, a user registration ends after completing many pages. But how to maintain the users' session information across all web pages.
In many situations, making use of cookies is the most effective way to track and remember purchases, preferences, commissions, and as well as other information required for better visitor experience or site statistics.
In many situations, making use of cookies is the most effective way to track and remember purchases, preferences, commissions, and as well as other information required for better visitor experience or site statistics.
You can also read our tutorial post on: JavaScript Variables
How it works
Your server sends some data to the visitor's browser in the form of a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor's hard drive. When the visitor arrives at another page on your site, the browser sends the same cookie to the web server for retrieval. Once retrieved, your server remembers what was stored earlier.
Cookies are a plain text data record of 5 variable-length fields-
- Expires - The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser.
- Domain - The domain name your site.
- Path - The path to the web page or directory that set the cookie. This may be blank if you intend to retrieve the cookie from any directory or web page.
- Secure - If this fied contains the word "secure", then the cookie may only be retrieved with a secure server. If this field is blank, then no such restriction exists.
- Name=Value - Cookies are set and retrieved in the form of key-value pairs.
Cookies were originally designed for CGI programming. The data that is contained in a cookie is automatically transmitted between the web browser and the web server, so CGI script on the server can read and write cookie values that are stored on the client.
JavaScript lang. can manipulate cookies using cookie property of the Document object. JavaScript can read, create, modify and also delete the cookies that apply to the current web page.
JavaScript lang. can manipulate cookies using cookie property of the Document object. JavaScript can read, create, modify and also delete the cookies that apply to the current web page.
You can also read our tutorial post on: JavaScript Syntax
Storing Cookies
The simplest way to creating a cookie is to assign a string value to document.cookie object, which looks like this.
document.cookie = "key1 = value1; key2 = value2; expires = date";
Here expires attribute is optional. If you provide this attribute with a valid date or time, then the cookie will expire on a given date or time and there after, the cookie value will not be accessible.
Note - Cookie values may not include semicolons, whitespaces, or commas. For this reason, you may want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape() function when reading the cookie value.
Note - Cookie values may not include semicolons, whitespaces, or commas. For this reason, you may want to use the JavaScript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape() function when reading the cookie value.
Example
Try the following example below. It sets a customer's name in an input cookie.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
if ( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
if ( document.myform.customer.value == "" ) {
alert("Enter some value!");
return;
}
cookievalue = escape(document.myform.customer.value) + ";";
document.cookie = "name=" + cookievalue;
document.write("Setting Cookies : " + "name=" + cookievalue );
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "Set Cookie" onclick = "WriteCookie();"/>
</form>
</body>
</html>
Output
Below is the output of the above example.
Now your machine has a cookie called name. You can set multiple cookies using multiple key = value pairs separated by comma.
You can also read our tutorial post on: JavaScript - Switch Case
Reading Cookies
Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the cookie. So you can make use of this string whenever you want to access the stored cookie. The document.cookie string will keep a list of the name = value pairs separated by semicolons, where name is the name of a cookie and value is it's string value.
You can mske use of strings' split() function to break a string into key and values as folows:
You can mske use of strings' split() function to break a string into key and values as folows:
Example
Try the following example to get all the cookies.
<html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write("All Cookies : " + allcookies);
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for (var i = 0; i < cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write("Key is : " + name + "and value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p>Click the following button and see the result</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>
<head>
<script type = "text/javascript">
<!--
function ReadCookie() {
var allcookies = document.cookie;
document.write("All Cookies : " + allcookies);
// Get all the cookies pairs in an array
cookiearray = allcookies.split(';');
// Now take key value pair out of this array
for (var i = 0; i < cookiearray.length; i++) {
name = cookiearray[i].split('=')[0];
value = cookiearray[i].split('=')[1];
document.write("Key is : " + name + "and value is : " + value);
}
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
<p>Click the following button and see the result</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</form>
</body>
</html>
Note - Here length is a method of Array class that returns the length of an array. We will discuss Arrays in details in a separate tutorial post. By that time, please try to understand it properly.
Output
Below is the output of the above example.
Click the following button and see result
Note - There may be other cookies already set on your machine. The above code will display all the cookies set on your machine.
Setting Cookies Expiry Date
You can extend the life of a cookie beyond the current web browser session by setting an expiry date and saving the expiry date within the cookie. This can be done by setting the 'expires' attribute to a date and time.
Example
Try the following example. It illustrates how to extend the expiry date of a cookie by one Month.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1);
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookie : " + "name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "SetCookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() + 1);
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookie : " + "name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "SetCookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Output
Below is the output of the above example.
You can also read our tutorial post on: Css Dimensions
Deleting a Cookie
Some times you will want to delete a cookie so that the subsequent attempts to read the cookie return nothing. To do this, you just need to set the expiry date to a time in the past.
Example
Try the following example below. It illustrates how to delete a cookie by setting it's expiry date to one month behind the current date.
<html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1);
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookie : " + "name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "SetCookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
<head>
<script type = "text/javascript">
<!--
function WriteCookie() {
var now = new Date();
now.setMonth( now.getMonth() - 1);
cookievalue = escape(document.myform.customer.value) + ";"
document.cookie = "name" + cookievalue;
document.cookie = "expires=" + now.toUTCString() + ";"
document.write("Setting Cookie : " + "name=" + cookievalue);
}
//-->
</script>
</head>
<body>
<form name = "myform" action = "">
Enter name: <input type = "text" name = "customer"/>
<input type = "button" value = "SetCookie" onclick = "WriteCookie()"/>
</form>
</body>
</html>
Output
Below is the output of the above example.
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about the Javascript Page Redirection.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
