Print bookPrint book

Session Handling Using Cookies

Site: Philippine Science High School - MC - Knowledge Hub
Course: SY25.CS3.Web Development
Book: Session Handling Using Cookies
Printed by: , Guest user
Date: Friday, 27 February 2026, 7:46 PM

Table of contents

1. Introduction


After completing this module, you are expected to:

    • Use cookies as a means of establishing sessions.

          Have you heard of the term cookies while browsing the Internet? You may have encountered some browsers that make you accept cookies before you are able to enter the website. This allows the websites to keep track of your information so that it can customize the contents to improve your experience.

          Here’s a brief context to know more about where cookies are used. When you want to visit a webpage, your browser sends a request to the server in charge of that webpage. The server sends back the information that your browser requested, in the form of the webpage that you wanted to visit. Let’s say that you wanted the webpage to be displayed as dark mode on your browser so you set it to dark mode. You finish browsing and close the browser.

          When a server has sent a web page to your browser, the connection shuts down and the server forgets everything about you and your browser. The next time you visit the webpage, it has returned to its normal layout and you must click on the dark mode option again. You have to do this every time that you visit the webpage. This is the default function of the internet protocol and web services as being stateless. You can read more about this through this website: https://nordicapis.com/defining-stateful-vs-stateless-web-services/

          In order to avoid having to do things or give data over and over again every time you start anew, we need a way for the web page to “remember” who you are and what your preferences are. 

          Cookies are strings of information that are stored in browsers as text files. Your information related to a webpage is stored in cookies and these cookies are sent to servers along with your browser’s request. This way, the webpage “remembers” who you are and sets your preferences according to the cookies. Other examples of information that cookies store are usernames, display settings, and session key (information about the state of the connection).

2. document.cookie


          This is the JavaScript document property in creating, accessing and deleting cookies. It contains a string that records cookies in the form of a name=value pair. Inside the string, an expiration date and time of the cookies could be set by using the keyword expires and also where in your computer these cookies will be saved by using another keyword path. The complete syntax in creating a cookie is shown below:

          document.cookie = "username=Mrs. Dee; expires=Wed, 5 May 2021 12:00:00 UTC; path=/";

          wherein username is the name of the cookie with Mrs. Dee as its value and saved inside the root directory of the current drive as indicated by path=/.

          Cookies are removed from a users’ device based on the date and time given in the expires keyword.  In our example above the cookie username would be deleted by May 5, 2021 at 12:00 (+8hours Philippine time). Re-setting the expires keyword past the initial expiration date and time will delete a cookie. If no expiry information is given, cookies are deleted once the browser is closed.

          The syntax for reading and accessing all cookies is shown below:

          var savedCookies = document.cookie;

          The statement above will return all saved cookies in one string in the form of name1=value1; name2=value2;...... plus other information inside the variable savedCookies.

2.1. A web page with cookies


          Let’s try creating a webpage that makes use of cookies. For this example, we will create a web page that asks for the name of the user. The next time the user visits the page, a welcome message with the user’s name is displayed.

          The code below has three main functions. Each function has a specific role in setting up the values of cookies. They are listed as follows:

1.     setCookie(varKey, varValue)

This is used to initialize the values of the cookie. The example belowinitializes a string that has a format "<varKey> = <varValue>".

Note that the < > symbols means that they are placeholders. The quotation marks are used to indicate that the values are strings.

Let’s say that you want the function to accept a cookie for a username. The varKey variable will store “username” because it is the “key,” so to say, to the actual value of the username. The value of the cookie will now look like this:

document.cookie = "username = ThisUserName";

2.     getCookie(varKey)

This is used to retrieve the values of cookies stored in the browser. You can see a command in the function that splits the cookie string at semicolons. This is to get the value pairs in the cookie.

3.     checkCookie()

This is used to check if there are cookies stored in the browser. If there is a username cookie stored in the browser, the username is retrieved and used for the welcome message. If there are no cookies stored, the user is prompted to enter a name.

Sample code to implement cookies statements:

<!DOCTYPE html>
<html>
<head>
     <script>
     // this function is called from checkCookie()


     function setCookie(varKey,varValue) {
     // saving actual cookie
          document.cookie = varKey + "=" + varValue;
     }


     /* This function is called from checkCookie() as well, in this getCookie() function, the username is derived by splitting the string stored in the cookie. Each key-value pair is separated by semicolons. Then the key and value are separated by equal signs. */


     function getCookie(varKey) {
          var key = varKey + "=";
          var retrieveCookie = document.cookie;
          var ca = retrieveCookie.split(';');
          for(var i = 0; i < ca.length; i++) {
               var c = ca[i];
               while (c.charAt(0) == ' ') {
                    c = c.substring(1);
               }
               if (c.indexOf(key) == 0) {
                    return c.substring(key.length, c.length);
               }
          }
          return "";
     }


     function checkCookie() {
          var user=getCookie("username");
          if (user != "") {
               alert("Welcome again " + user);
          } else {
               user = prompt("Please enter your name:","");
               if (user != "" && user != null) {
                    setCookie("username", user, 30);
               }
          }
     }
     </script>
</head>
<body onload="checkCookie()">

</body>
</html>

 


3. Summary and References


Summary

Cookies are used to keep information about the user. By having cookies, websites can further improve user experience by “remembering” the user and their preferences.

References

Image retrieved from https://upload.wikimedia.org/wikipedia/commons/b/b9/Chocolate_Chip_Cookies_-_kimberlykv.jpg

JavaScript and Cookies. (n.d.). RxJS, ggplot2, Python Data Persistence, Caffe2, PyBrain, Python Data Access, H2O, Colab, Theano, Flutter, KNime, Mean.js, Weka, Solidity. https://www.tutorialspoint.com/javascript/javascript_cookies.htm

JavaScript Cookies. (n.d.). W3Schools Online Web Tutorials. https://www.w3schools.com/js/js_cookies.asp

Set and get cookies in JavaScript. (n.d.). Tutorial Republic - Online Web Development Tutorials. https://www.tutorialrepublic.com/javascript-tutorial/javascript-cookies.php

Why are cookies called cookies? (2015, July 22). inLIFE. https://www.inlife.co.uk/why-are-cookies-called-cookies/