JavaScript – Cookies


JavaScript and Cookies


”;


What are Cookies ?

In JavaScript, cookies are piece of data stored in the user”s web browser. The cookies are stored in the key-value pair inside the browser. We can manipulate the cookies using cookie property of document object. We can set or store a cookie in key-value pair using the cookie property. We can read cookies using document”s cookie property and extract the desired information using destructuring.

Why are Cookies needed?

Web Browsers and Servers use HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages.

For example, you have logged in to a particular website on a particular web page. How do other webpages of the same website know your state that you have already completed the logged-in process? In this case, cookies are used.

In many situations, using cookies is the most efficient method of remembering and tracking preferences, purchases, commissions, and other information required for better visitor experience or site statistics.

Sometimes, cookies are also used for caching, increasing the website or application performance.

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. Now, when the visitor arrives at another page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/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 of your site.

  • 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-value pairs

Cookies were originally designed for CGI programming. The data contained in a cookie is automatically transmitted between the web browser and the web server, so CGI scripts on the server can read and write cookie values that are stored on the client.

Setting/ Storing Cookies

JavaScript can manipulate cookies using the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookies that apply to the current web page.

The simplest way to create a cookie is to assign a string value to the document.cookie object, which looks like this.

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

Here the 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 thereafter, the cookies” value will not be accessible.

The cookie string contains the key-value pairs separated by the semi-colons.

Note − Cookie values may not include semicolons, commas, or whitespace. 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 you read the cookie value.

Example

Try the following. It sets a customer 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>

Output