ES6 | Cookies

Cookies are basically a storage facility of web browsers. It comes under the Web Storage of a browser which is a local or client storage facility. The data are in the browser even after the browser window is closed in many websites there is need of remembering session information, such as, when we log in to email, Facebook, etc many time from the same PC, also in another commercial site, for cookies we can log in easily in that sessions, also we are logged in for a time limit whether the browser was close all the time when we use that sites. Cookies are use in JavaScript using cookie property of Document object. This property is readable and writable both.

A cookie is an old technology used in web browsers as client-side storage which works by server-side scripting languages like ASP, PHP, etc. Cookies can be created, modified, and also accessed. Cookies were the part of CGI (Common Gateway Interface) programming, cookies are used CGI to transmit data between browser and server.

Working of Cookies: Cookies is stored as text like data in the local storage of a browser. Cookies are the data that sends from the server-side, with the information of visitors on any web page or website, and store them to the hard disk when the visitor leaves the web page. And after in the future when the visitor again visits the web site then the cookies are retrieved from the client-side and send a request with the cookies to the server-side, and the server remembers what was stored earlier. Cookies have some attribute by which the data or information are stored.

  • Name & value: This the main mandatory thing of cookies. It is the main value of the session which is the store and retrieves during visiting in the web sites as key-value pair.
  • Domain: Domain is the website’s domain in which we are surfing. It is not a mandatory thing, it does not need to declare the domain when writing the cookies. It can be declared by default by the web browser.
  • Path: Path is nothing but the website, we are surfing. it also can be set by default by the web browser.
  • Expires: It the attribute which define expiration time of the saved cookies. If it’s not declared at the time of setting the cookie, then the cookie will expire when the browser close.
  • Secure: This field contains only one word, name as “secure”, if its blank then the cookies are retrieved in any non-secure server, but if the field is not blank then the cookies are retrieved only insecure server.

Some syntax of accessing cookie property in JavaScript:

  • Writing cookie:
    // For normal use without the optional fields 
    document.cookie = "name= value";

    or



    // For all the fields
    document.cookie = "name= value; expires=date; 
    domain=domain_name; path=website_name; secure";
    
  • Reading cookie: Cookies can be read using many ways, see below-
    var cookieVal=document.cookie;

    or

    console.log(document.cookie);

    or

    alert(document.cookie);

  • Examples: Below is the examples of all the task can be performed on the cookies.

    • Writing cookies: In this program we will be writing cookies.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>GeeksforGeeks</title>
          <script type="text/javascript">
              // Function to setting cookies
              function setCookies() {
        
                  // Using cookie property
                  cookieVal = document.cookieFrm.nameVal.value + ";";
                  document.cookie = "name = " + cookieVal;
              }
        
              // Function to reading cookies
              function showCookies() {
        
                  // Display the cookie value when pressing
                  // the "showCookies" button 
                  document.getElementById("ShowC").innerHTML =
                    ("Cookie value = " + cookieVal);
              }
          </script>
      </head>
        
      <body>
        
          <div style="background-color:#7FFF00; width: 50%;">
              <h2 style="color:#006400;">Writing Cookies</h2>
        
              <form action="" name="cookieFrm">
        
                  <!-- Write a value to store a cookie in Name box -->
                  Name:
                  <input type="text" name="nameVal" />
        
                  <br>
                  <br>
        
                  <!--Button for set cookies-->
                  <input type="button" value="Set Cookie"
                         onclick="setCookies();" />
        
                  <!--Button for show cookies-->
        
                  <input type="button" value="Show Cookie"
                         onclick="showCookies();" />
              </form>
              <span id="ShowC"> </span>
              <!--after the press the show cookie button 
                  the value of the cookie will appear here-->
          </div>
      </body>
        
      </html>

      chevron_right

      
      

    • Output:
    • Reading cookies: In this program we will be Reading cookies.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>GeeksforGeeks</title>
          <script type="text/javascript">
              // Function to setting cookies
              function setCookies() {
                  document.cookie = "name = " 
                  + document.cookieFrm.nameVal.value + ";";
                  document.cookie = "class = "
                  + document.cookieFrm.cls.value + ";"
                  document.cookie = "subject = " 
                  + document.cookieFrm.sub.value + ";"
              }
        
              //Function to reading cookies
              function showCookies() {
                  var arrCookie = document.cookie.split(";");
                  /* To store the cookie value in an array separately 
                      here use "split()" method, which splits the values
                      where ";" is located, such as 
                      arrCookie[0]="name=geeksforgeeks"
                      arrCookie[1]="class=3rd year" */
        
                  for (var i = 0; i < arrCookie.length; i++) {
                      var valArr = arrCookie[i].split("=");
                      /* here "valArr" is use to store the acctual value
                         of a particular cookie field, such as
                         valArr[0]=name
                         valArr[1]=geeksforgeeks */
        
                      if (valArr[0].trim() == 'name')
                      /* The "trim()" is used for remove unwanted white 
                         spaces, otherwise there maybe some mismatch in 
                         the values search for "name" */
                      {
                          document.cookieFrm.nameVal.value = valArr[1];
                      }
        
                      if (valArr[0].trim() == 'class') {
                          document.cookieFrm.cls.value = valArr[1];
                      }
        
                      if (valArr[0].trim() == 'subject') {
                          document.cookieFrm.sub.value = valArr[1];
                      }
        
                  }
        
              }
          </script>
      </head>
        
      <body>
        
          <div style="background-color:#7FFF00; width: 50%;">
              <h2 style="color:#006400;">Reading Cookies</h2>
        
              <form action="" name="cookieFrm">
                  <!--write value to store as cookie in Name box-->
                  Name:
                  <input type="text" name="nameVal" />
                  <br>
                  <br> Class:
                  <input type="text" name="cls" />
                  <br>
                  <br> Subject:
                  <input type="text" name="sub" />
        
                  <br>
                  <br>
        
                  <!-- Button for set cookies-->
                  <input type="button" value="Set Cookie" 
                         onclick="setCookies();" />
        
                  <!-- Button for show cookies-->
                  <input type="button" 
                         value="Restore previous value using Cookie"
                         onclick="showCookies();" />
              </form>
              <span id="ShowC"> </span>
          </div>
      </body>
        
      </html>

      chevron_right

      
      

    • Output:

    Note: In the both example we can use escape() and unescape() method for write and read the cookie value respectively. The cookie value may not contain spaces or special character like semi-colon(;), in this case the we cannot separate the values of the cookies for store them so if we use those two method then this problems will be solve. The escape() is use when store the cookie values and unescape() is use when retrieving the cookie values. Just put the statement in escape() and unescape() method like below-

    • escape(document.cookieFrm.nameVal.value)
    • unescape(document.cookie)

    Update and Delete existing cookies: Updating a cookie value is very easy, that replace the previous value with a new value. But delete a cookie value its not easy as update, but its also a easy thing. A cookie value is deleted automatically when expiration time of the cookie is reached. But if we want to delete a cookie value before the expiration, then we have to replace the expire field with a past date and time, then the cookie will delete.

    • Updating cookies: In this program we will be Updating cookies.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>GeeksforGeeks</title>
          <script type="text/javascript">
            
              // Function to setting cookies
              function setCookies() {
                  cookVal = "name = " 
                  + escape(document.cookieFrm.nameVal.value) + ";";
                  document.cookie = cookVal;
                  document.getElementById("ShowC").innerHTML =
                      ("Cookie value : <br>" + document.cookie);
              }
        
              // Function to update cookies
              function updateCookies() {
        
                  // Updating the cookie value 
                  upCoo = "name = " 
                  + escape(document.cookieFrm.updateCoo.value) + ";";
                  document.cookie = upCoo;
        
                  // Showing updated cookie value 
                  document.getElementById("ShowCC").innerHTML =
                      ("<br><br>Updated Cookie value : <br>"
                       + document.cookie);
              }
          </script>
      </head>
        
      <body>
        
          <div style="background-color:#7FFF00; width: 60%;">
              <h2 style="color:#006400;">Update Cookies</h2>
        
              <form action="" name="cookieFrm">
                  Enter a value to store:
                  <input type="text" name="nameVal" />
                  <br>
                  <br> 
                  Enter a value to update:
                  <input type="text" name="updateCoo" />
                  <br>
                  <br>
        
                  <!-- Button for set cookies-->
                  <input type="button" value="Set Cookie" 
                         onclick="setCookies();" /> 
                  <input type="button" value="Update existing Cookie" 
                         onclick="updateCookies();" /> 
              </form>
              <span id="ShowC"> </span>
              <span id="ShowCC"> </span>
          </div>
      </body>
        
      </html>

      chevron_right

      
      

    • Output:
    • Deleting cookies: In this program we will be Deleting cookies.
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html>
        
      <head>
          <title>GeeksforGeeks</title>
          <script type="text/javascript">
              
              // Setting cookies
              function setCookies() {
                  cookVal = "name = "
                  + escape(document.cookieFrm.nameVal.value) + ";";
                  document.cookie = cookVal + 
                    "expires = Sun, 01-May-2021 14:00:00 GMT";
        
                  // Add expiration date &print the cookie value
                  document.getElementById("ShowC").innerHTML =
                    ("Cookie value : <br>" + document.cookie);
              }
        
              // Function to setting cookies
              function dltCookies() {
                  document.cookie = cookVal + 
                    "expires = Sun, 01-May-2019 14:00:00 GMT";
                  
                  // Chnage the expiration date
                  document.getElementById("ShowC").innerHTML =
                    ("After delete, Cookie value : <br>" + document.cookie + "<br>");
              }
          </script>
      </head>
        
      <body>
        
          <div style="background-color:#7FFF00; width: 55%;">
              <h2 style="color:#006400;">
                Update & Delete Cookies
              </h2>
        
              <form action="" name="cookieFrm">
                  enter a cookie value:
                  <input type="text" name="nameVal" /> 
                  <br>
                  <br>
                  <input type="button" value="Set Cookie" 
                         onclick="setCookies();" />
                  <input type="button" value="Delete Cookie" 
                         onclick="dltCookies();" />
              </form>
              <span id="ShowC"> </span>
              <span id="ShowCC"> </span>
          </div>
      </body>
        
      </html>

      chevron_right

      
      

    • Output:

    full-stack-img




    My Personal Notes arrow_drop_up

    3rd year student of Information Technology JADAVPUR UNIVERSITY

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.