Teachnique
      CourseRoadmaps
      Login

      OverviewPlacementSyntaxHello WorldConsole.log()CommentsVariableslet StatementConstantsData TypesType ConversionsStrict ModeReserved Keywords

      OperatorsArithmetic OperatorsComparison OperatorsLogical OperatorsBitwise OperatorsAssignment OperatorsConditional Operatorstypeof OperatorNullish Coalescing OperatorDelete OperatorComma OperatorGrouping OperatorYield OperatorSpread OperatorExponentiation OperatorOperator Precedence

      If...ElseWhile LoopsFor LoopFor...in LoopFor...of LoopLoop ControlBreak StatementContinue StatementSwitch CaseUser Defined Iterators

      FunctionsFunction ExpressionsFunction ParametersDefault ParametersFunction() ConstructorFunction HoistingArrow FunctionsFunction InvocationFunction call() MethodFunction apply() MethodFunction bind() MethodClosuresVariable ScopeGlobal VariablesSmart Function Parameters

      NumberBooleanStringsArraysDateMathRegExpSymbolSetsWeakSetMapsWeakMapIterablesReflectTypedArrayTempate LiteralsTagged Templates

      Objects OverviewClassesObject PropertiesObject MethodsStatic MethodsDisplay ObjectsObject AccessorsObject ConstructorsNative PrototypesES5 Object MethodsEncapsulationInheritanceAbstractionPolymorphismDestructuring AssignmentObject DestructuringArray DestructuringNested DestructuringOptional ChainingGlobal ObjectMixinsProxies

      HistoryVersionsES5ES6ECMAScript 2016ECMAScript 2017ECMAScript 2018ECMAScript 2019ECMAScript 2020ECMAScript 2021ECMAScript 2022

      CookiesCookie AttributesDeleting Cookies

      Browser Object ModelWindow ObjectDocument ObjectScreen ObjectHistory ObjectNavigator ObjectLocation ObjectConsole Object

      Web APIHistory APIStorage APIForms APIWorker APIFetch APIGeolocation API

      EventsDOM Events

      Feedback

      Submit request if you have any questions.

      Course
      Cookies

      JavaScript Tutorial

      This JavaScript tutorial is crafted for beginners to introduce them to the basics and advanced concepts of JavaScript. By the end of this guide, you'll reach a proficiency level that sets the stage for further growth. Aimed at empowering you to progress towards becoming a world-class software developer, this tutorial paves the way for a successful career in web development and beyond.

      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

      
      Now your machine has a cookie called name. You can set multiple cookies using multiple key = value pairs separated by comma.

      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 use this string whenever you want to access the cookie. The document.cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value.
      You can use strings' split() function to break a string into key and values as follows

      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>
      Note − Here length is a method of Array class which returns the length of an array. We will discuss Arrays in a separate chapter. By that time, please try to digest it.
      
      
      Note − There may be some 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 browser session by setting an expiration 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 1 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 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

      
      

      Deleting a Cookie

      Sometimes you will want to delete a cookie so that 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. It illustrates how to delete a cookie by setting its 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 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

      
      
      

      Updating Cookies

      To update the particular key-value pair in the cookie, you can assign new key-value pair to the document.cookie property. Here, you need to ensure you are using the same key whose value you want to update.

      Syntax

      Follow the syntax below to update the cookies.
      document.cookie="key1=value1";
      In the above syntax, we are updating the value of the ‘key’ cookie.

      Example

      In the code below, click the set cookies button to set the cookies. It will set the watch value for the cartItem and 10000 for the price.
      After that, you can click the get cookies button to observe the cookies.
      Next, you can click on the update cookies button to update the cookies. It will change the cartItem value to bag and the price to 5000.
      Now, click the get cookies button again to get the updated cookie value.
      <html>
      <body>
      <p id = "output"> </p>
      <button onclick = "setCookies()"> Set Cookie </button> <br> <br>
      <button onclick = "updateCookies()"> Update Cookie </button> <br> <br>
      <button onclick = "getCookies()"> Get Cookies </button>
      <script>
      let output = document.getElementById("output");
      function setCookies() {
        document.cookie = "cartItem=watch";
        document.cookie = "price=10000";
      }
      function updateCookies() {
        // Updating cookies
        document.cookie = "cartItem=bag"; 
        document.cookie = "price=5000";
      }
      function getCookies() {
        //Spliting the cookie string
        const allCookies = document.cookie.split("; "); 
        output.innerHTML = "The cookie data are : <br>";
      
        for (const cookie of allCookies) { 
          const [key, value] = cookie.split("="); 
          if (key == "cartItem" || key == "price") {
             output.innerHTML += `${key} : ${decodeURIComponent(value)} <br>`;
          }
        }
      }
      </script>
      </body>
      </html>