In Depth Cookies In JavaScript Sagar Jaybhay

In this article we will understand In Depth about Cookies in JavaScript. By reading this article you will able to create Cookies, Delete Cookie By Sagar Jaybhay.

If you see web application works on HTTP protocol and the HTTP protocol is a stateless protocol. The meaning of this is when we request some data, web page after filling some information on the webpage the webserver does not remember anything about that request after processing that request but we want our web application to remember users choice.

This means if I fill my first name on the page after the subsequent request the page should know what information I filled in that textbox but the page doesn’t remember that so why this happens because web pages use the HTTP protocol to serve the webpage and HTTP is stateless.

Meaning that after processing the request of client web server doesn’t remember about the client settings to remember this we have several options but one of the easiest and common way is use cookies.

function setCookies(){

    var firstName=document.getElementById('firstname').value;
   // alert(firstName);
    if(firstName!=""){
        debugger
        document.getElementById('firstname').value=firstName;
        document.cookie="fname = "+firstName+";"//expires=Mon, 17 Feb 2020 00:21:00 UTC;";
    }
}

window.onload=function(){

    var cookiearray=document.cookie.split('=')
    document.getElementById('firstname').value=cookiearray[1]
}

What are Cookies?

Cookies are small text files that browser stores in the client’s machine. It is a string of name-value pair which is separated by semi-column.

How did cookies save on machines?

document.cookie="fname = "+firstName+"; expires=Mon, 17 Feb 2020 00:21:00 UTC;";

How to read cookies?

var doc=document.cookie;

Cookie Attribute

1. ;path=path (e.g., '/', '/mydir') by default cookies are valid for only web pages in the directory of a current web page stored and its descendent but if you want to set valid for root then path='/ '
2. ;domain=domain (e.g., 'example.com' or 'subdomain.example.com'). it specifies the domain for which cookie is valid.
3. ;max-age=max-age-in-seconds (e.g., 60*60*24*365 or 31536000 for a year)
4. ;expires=date-in-GMTString-format If neither expires nor max-age specified it will expire at the end of the session.
5. ; secure Cookie to only be transmitted over the secure protocol as https which ensures the cookie is always encrypted when transmitting from client and server.
6. ;samesite SameSite prevents the browser from sending this cookie along with cross-site requests.

Expires and max-age-attribute: if you want to create a persistent cookie that is a cookie that is not deleted after the browser is closed for this either use expires or max-age.

What is the difference between expires and max-age attribute?

With expires attribute, you can set the expiry date. This expire attribute is obsolete and very few browsers support this attribute.

Max-age: this attribute you can set the expiry in time and seconds and most of them are supports.

You also save the JSON object in the cookie.

How to check Cookie is enable or not?

this.navigator.cookieEnabled

above statement returns true if a cookie is enabled.

How to check JavaScript is enabled or Not?

The easiest way to detect the javascript is enabled or not by using the noscript tag. The content in noscript is displayed only when javascript is not enabled by the browser.

GitHub Link:- https://github.com/Sagar-Jaybhay/JavaScriptInBrowser

Originally published at https://sagarjaybhay.net on March 9, 2020.