The cookie can be defined as a small piece of text that a browser stores in the user's computer. Cookies are an old mechanism of client-side storage that was designed to be used in server-side scripting languages like ASP, php, etc.
Mainly, cookies are used for keeping track of information like user preferences that can retrieve for personalizing the page when the user revisits the website. Cookies can also be created, modified, and accessed directly by JavaScript, but the process for doing the same is somehow complicated.
Servers and web browsers use HTTP protocol (stateless protocol) for communication. HTTP is a stateless protocol, so after processing the initial client request by the web server, it does not remember anything about the settings made by the client. It treats every request independently. So, the server does not keep track of data after sending it on the browser. But in many cases, data will be required again.
This request-response cycle between client and server is referred to as a session. Cookies are the default mechanism that is used by the browsers for storing the data refer to the user's session.
The server sends some data to the user's browser in the form of a cookie. The browser may accept the cookie. If it accepts, then it is stored as a record of plain text on the hard drive of the user. Now, when a user visits another page of the same website, then the browser sends the same cookie to the server for retrieval. Once it is retrieved, then the corresponding server remembers what was stored earlier.
Cookies are a plain-text record of data that includes five variable-length fields
Originally, cookies were designed for CGI (Common Gateway Interface) programming. The data in the cookie is transmitted automatically between the web server and web browser. So, CGI scripts on the server can read and write the values of cookies that are stored on the client-side.
In JavaScript, we can manipulate the cookies by using the cookie property of the document object. We can also create, read, delete, and modify the cookies that apply to the current page.
The easiest way of creating or storing a new cookie is to assign a name = value string value to the document.cookie object. It will look like this:
"document.cookie = "key1 = value1; key2 = value2; expires = date";
The expire attribute in the above syntax is optional. If we manually provide the valid date and time to this attribute, then the cookie will expire on the given date and time.
The value of the cookie cannot contain whitespaces, commas, or semicolons. Because of this, we will require to use escape() function (the built-in function of JavaScript) for encoding the values containing these characters before storing it in the cookie. Likewise, we will also need to use corresponding unescape() function for reading the cookie value.
document.cookie = "name=" + escape("XYZ");By default, the lifetime of the above cookie is the current browser session. It means that it will be lost when user exits the browser.
You can specify the cookie's lifetime by using the expires attribute. This attribute gives a way to create a persistent cookie. Here, the declaration of time and date represents the active period of a cookie. Once, the declared time is passed, the cookie will delete automatically.
document.cookie="username=XYZ;expires=Mon, 10 Aug 2040 12:00:00 UTC";
To make a cookie that persists beyond the session of the current browser, we need to specify its lifetime (in seconds). We can also specify it by using the max-age attribute. It is an alternative to expires attribute, which specifies the expiration of cookie in seconds from the current moment. This attribute determines the lifetime of a cookie that how long it could remain on the user's system before deletion.
If the value of the max-age attribute is either zero or negative, then the cookie is deleted.
For example: The lifetime of the following cookie is for 30 days.
document.cookie="username=XYZ;max-age=" + (60*60*24*30) + ";"
Let us try to understand the illustration for setting up the cookie by using the following example:
<html>
<head>
<title>Cookie Example</title>
</head>
<body style="text-align:center;">
<form name = "myform" action = " ">
Enter Name: <input type="text" name="uname" >
<input type="button" value="setCookie" onclick="setCookie()">
</form>
<script>
function setCookie()
{
if(document.myform.uname.value == ""){
alert("Required Name");
return;
}
value = escape(document.myform.uname.value) + ";";
document.cookie = "name = " + value;
document.write ("Cookie: " + "name = " + value);
}
</script>
</body>
</html>After the successful execution of the above code, you will get the following output.
If the textfield is empty and you are clicking on the setCookie button, then you will get an alert, as shown in the following image.
Once you entered the required value and click on the setCookie button, then you will see the following output.
Reading a cookie is slightly complex than setting the cookie because document.cookie property returns you a string that contains a space and semicolon separated list of all cookies. You can use this string where you require to access the cookie.
To get a cookie from the list, you can use the split() function of strings for breaking the string in the form of keys and values.
function getCookie() {
var cookievalue = document.cookie;
document.write ("Cookies : " + cookievalue );
}
// get all the pairs of cookies in an array
arr = cookievalue.split(';');
// take key-value pair out of this array
for(var i = 0; iIn JavaScript, you can change the cookie in the same way as you create it by overwriting it with a new value. The only way to update or modify the cookie is to create another cookie. If you create a cookie with the same name but with different path then that of an existing one, it will cause the addition of a new cookie.
// Creating the cookie document.cookie = "name=XYZ;path=/;max-age=" + 365*24*60*60; // Updating the cookie document.cookie = "name=ABC;path=/;max-age=" + 30*24*60*60;
There are some situations in which you want to delete a cookie. The process to delete a cookie is quite simple. You do not require to specify the value of a cookie to delete it. To do this, you need to set the value of the 'expires' attribute to a passed date.
You can see the illustration for the same in the following code:
document.cookie = "name=value; expires= Thu, 21 Aug 2014 16:00:00 UTC; path=/ "
