HTML5 Cookie


An HTML5 Cookie, commonly referred to as a web cookie or simply cookie, is a small text file stored on a user’s computer by a web browser. It allows websites to remember information about the user, such as login information, site preferences, and tracking user activities for data analysis. HTML5 cookies are widely used to improve user experience, website functionality, and for targeted advertising purposes.


H-T-M-L-Five Cookie = /ˈeɪʧˈtiːˈɛmˈɛlˈfaɪv ˈkʊki/

Key Takeaways

  1. HTML5 Cookie enables the storage of small amounts of data on the user’s browser, improving the browsing experience by remembering user preferences and reducing server load.
  2. Cookie data is limited in size, with a maximum of 4KB per cookie, which should be considered when storing data on the client-side.
  3. In HTML5, cookies are managed through the JavaScript `document.cookie` property, which allows developers to create, read, and delete cookies easily within their web applications.


The term HTML5 Cookie is important as it refers to a small piece of data stored by websites in the user’s browser, which plays a crucial role in enhancing user experience and web functionality.

With the advent of HTML5, cookies have been improved to provide superior data management and storage capabilities, allowing websites to remember user preferences, facilitate faster webpage loading, and streamline authentication processes.

Moreover, they enable targeted advertising and help track visitor’s behaviors and patterns, assisting website owners in making data-driven decisions.

However, despite their benefits, HTML5 Cookies have raised privacy concerns, which has led to the implementation of regulations like GDPR to protect user data and ensure a secure browsing experience.


HTML5 cookies play an integral role in enhancing users’ experience while browsing websites. For instance, they help store certain user preferences and data, which allows websites to present personalized information, remember login details, and maintain a user’s browsing session.

This empowers websites to provide a more streamlined and user-friendly experience by reducing the need for users to continuously re-input passwords and preferences. Furthermore, these cookies facilitate online shopping by remembering user’s shopping cart information, ensuring seamless browsing from page to page.

Apart from user experience, HTML5 cookies also serve several other crucial purposes, including enabling website analytics and targeted advertising. By tracking a user’s website visits, page views, and other user behaviors, cookies allow website owners to understand their audience better, subsequently helping them make informed decisions to optimize website performance.

Additionally, this information serves advertising platforms by helping them display tailored ads based on individual browsing patterns and interests. In summary, HTML5 cookies support various aspects of the internet ecosystem, from enhancing user experience to supporting the growth of online businesses through data-driven decision making and promotional activities.

Examples of HTML5 Cookie

HTML5 Cookies, also known as Local Storage or Web Storage, are a web technology that allows websites to store data on the user’s device for later retrieval. This can be useful for a variety of purposes, such as personalizing user experiences, improving website performance, and even maintaining user authentication. Here are three real-world examples of HTML5 Cookie usage:

E-commerce websites: Online shopping websites like Amazon and eBay use HTML5 Cookies to store user preferences, such as preferred language, currency and location settings. Additionally, these cookies store information about the items in a user’s shopping cart, thus allowing users to pick up where they left off when they return to the site at a later point.

Social media websites: Platforms like Facebook, Twitter, and LinkedIn utilize HTML5 Cookies for personalization and tracking user interactions. For instance, they may record the types of posts a user frequently interacts with to tailor their feed accordingly. Moreover, some social media websites use cookies to keep users logged in, even if they close their browser.

News websites: Many news sites and online publications, such as The New York Times, CNN, and BBC, leverage HTML5 Cookies to remember user preferences, such as their preferred news category and saved articles. Furthermore, some news websites use cookies to track the number of articles a user has accessed to enforce paywalls or subscription limits.

HTML5 Cookie FAQ

1. What is an HTML5 cookie?

An HTML5 cookie, often referred to as a web cookie or browser cookie, is a small piece of data stored by a user’s web browser on their device. The cookie is created by a web server through a user’s browser when they visit a website, and it allows the site to remember the user’s actions and preferences, such as login information, language preferences, and more, to help facilitate a more seamless user experience.

2. How do cookies work in HTML5?

In HTML5, cookies work by using JavaScript to set, read, and delete cookies on the user’s device. When a user visits a site that uses cookies, the server sets the cookie details in the form of a key-value pair using the “Set-Cookie” HTTP response header. The browser then stores this data as a text file and sends it back to the server in subsequent site visits through an “HTTP Request” header known as “Cookie.” This enables the server to remember the user’s preferences and deliver a tailored experience based on their previous actions.

3. How do I create a cookie using JavaScript in HTML5?

To create a cookie using JavaScript in HTML5, you can use the “document.cookie” property. It allows you to set a new cookie by assigning a key-value pair, along with optional attributes such as an expiration date, secure flag, and path. Here’s a sample code to create a cookie:

// JavaScript code to create a cookie with an expiration time
function setCookie(name, value, daysUntilExpiration) {
  let expirationDate = new Date();
  expirationDate.setDate(expirationDate.getDate() + daysUntilExpiration);
  let cookieValue = encodeURIComponent(value) + "; expires=" + expirationDate.toUTCString() + "; path=/";
  document.cookie = name + "=" + cookieValue;

You can then call this function in your HTML code to set a new cookie:

setCookie("user", "John Doe", 30);

4. How do I read a cookie using JavaScript in HTML5?

To read a cookie using JavaScript in HTML5, you can use the “document.cookie” property again, but this time you will need to parse the string to extract the information you want. Here’s a sample code to read a cookie:

function getCookie(name) {
  let cookieKey = name + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let cookiesArray = decodedCookie.split(";");
  for (let i = 0; i < cookiesArray.length; i++) {
    let currentCookie = cookiesArray[i].trim();
    if (currentCookie.indexOf(cookieKey) == 0) {
      return currentCookie.substring(cookieKey.length, currentCookie.length);
  return "";

You can then call this function in your HTML code to read the cookie value:

let user = getCookie("user");

5. How do I delete a cookie using JavaScript in HTML5?

To delete a cookie using JavaScript in HTML5, you can reset the cookie by setting an expiration date in the past. This will cause the browser to remove the cookie from the user’s device. Here’s a sample code to delete a cookie:

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

You can then call this function in your HTML code to delete the cookie:


Related Technology Terms


HTML5 Cookie Related Terms

  • LocalStorage
  • SessionStorage
  • Web Storage API
  • JavaScript
  • Browser Cache


Sources for More Information


About The Authors

The DevX Technology Glossary is reviewed by technology experts and writers from our community. Terms and definitions continue to go under updates to stay relevant and up-to-date. These experts help us maintain the almost 10,000+ technology terms on DevX. Our reviewers have a strong technical background in software development, engineering, and startup businesses. They are experts with real-world experience working in the tech industry and academia.

See our full expert review panel.

These experts include:


About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.

More Technology Terms

Technology Glossary

Table of Contents