How to Deal with Cookies in JavaScript

Share this article

For years, many web developers have needed to store data on the client. Before the advent of HTML5 and its new mechanisms, every developer used cookies to achieve this goal. Unfortunately, working with cookies in JavaScript can cause a lot of headaches. This article discusses what cookies are, and how you can build functions to create, retrieve, and delete them.

What are Cookies?

A cookie is a piece of data which is sent from a website and stored locally by the user’s browser. Cookies are needed because HTTP is stateless. This means that HTTP itself has no way to keep track of a user’s previous activities. One way to create state is by using cookies.

To Use Cookies or Not to Use Cookies

Today most, if not all, websites worldwide use cookies. However, cookies are rather limited, as they can only store up to 4KB of data. Moreover, many developers claim that because cookies are sent to the server with each HTTP request, large ones can consume considerable network bandwidth, hurting performance. Another important criticism against cookies has been written by Remy Sharp in the co-authored book Introducing HTML5. This can be potentially catastrophic for mobile connections. Another important point to keep in mind is that if you have European visitors, then your site must comply with the EU E-Privacy Directive from May 26, 2012. If you never heard about this, take a look at Why Your Site is Now Illegal in Europe. In recent years, a lot of thought has been put towards finding an alternative to cookies. Thanks to HTML5, some new techniques have appeared on the scene. The first one is Web Storage API, which has methods for storing name-value pairs. For an overview of the Web Storage API, I advise you to read An Overview of the Web Storage API. The second alternative is the Web SQL Database API, which stores data in databases that can be queried using a variant of SQL. While Web SQL is well supported, the standard is no longer being actively maintained. Last, but not least, is the Indexed Database API, that defines a database of records holding simple values and hierarchical objects. You can read more about IndexedDB in Up Close and Personal with HTML5 IndexedDB. Unfortunately, IndexedDB isn’t widely supported, so you probably shouldn’t rely on it. No matter your preference, there are several important points to understand. While all of these APIs provide local storage similar to cookies, they do not send their data back to the server. So, in most cases you will use both cookies and one of the storage APIs. Technically, the same effects could be achieved using AJAX, but this over complicates the task and requires additional code.

How Cookies are Made

The structure of a cookie is really simple. It’s nothing but several key-value pairs. Pairs are separated by semicolons, while the equal sign character separates the key from its value. A cookie can optionally have an expiration date, after which it’s deleted. If an expiration date isn’t provided, the cookie will last until the session or browser is closed. If you set the expiration date in the past, the browser will delete the cookie. Please note that the format of the date is important, as it has to be in UTC/GMT. Moreover, you can specify a domain and a path where the cookie can be read and written. By default the path value is ‘/’, meaning that the cookie is visible to all paths in a given domain. If you don’t specify the domain, it will belong to the page that set the cookie. The way you set these data also matter. The order should be: key-value;expiration_date;path;domain;
. The following example shows a cookie that is accessible in all the paths of the domain, and has just one key-value pair.
visits=3; path=/;
The following example shows a cookie that is accessible in all the paths of the domain (by default), and expires on October 31, 2012 at 11 a.m..
last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;

Scripting Cookies

So far, I have explained what cookies are, as well as some of their pros and cons. Now it’s time to see what functions JavaScript exposes to work with them. Unfortunately, the first thing I have to say is that JavaScript doesn’t have native methods to easily work with cookies. JavaScript can create, retrieve, and delete cookies using the document.cookie property, but it’s not really a pleasure to use. Every time you are forced to deal with split(), substring() and for loops. Please note that while you can treat document.cookie like a string variable, it’s actually more than that. For example, take the following script:
document.cookie = "visits=3; path=/;";
document.cookie = "last-visit=Mon, 15 Oct 2012 19:36:00 GMT; expires=Wed, 31 Oct 2012 11:00:00 GMT;";
If you then print document.cookie, you’ll get an unexpected result as shown below:
// print visits=3; last-visit=Mon, 15 Oct 2012 19:36:00
By now, you’ve seen the hardships of dealing with cookies in JavaScript. So, it’s time to create our own functions to easily manage them. The following function will help you to create a cookie. Please note that the expires parameter can be either an instance of a Date object or a number which indicates the number of days. The latter can be a negative number, which sets the expiration date in the past.
function createCookie(name, value, expires, path, domain) {
  var cookie = name + "=" + escape(value) + ";";

  if (expires) {
    // If it's a date
    if(expires instanceof Date) {
      // If it isn't a valid date
      if (isNaN(expires.getTime()))
       expires = new Date();
      expires = new Date(new Date().getTime() + parseInt(expires) * 1000 * 60 * 60 * 24);

    cookie += "expires=" + expires.toGMTString() + ";";

  if (path)
    cookie += "path=" + path + ";";
  if (domain)
    cookie += "domain=" + domain + ";";

  document.cookie = cookie;
You can call this function as shown below.
createCookie("website", "", new Date(new Date().getTime() + 10000));
createCookie("author", "aurelio", 30);
Now that you set a cookie, you need to be able to retrieve them. You’ll do it using a given key and the following getCookie() function. It returns the value of the key if it’s found, and null
function getCookie(name) {
  var regexp = new RegExp("(?:^" + name + "|;\s*"+ name + ")=(.*?)(?:;|$)", "g");
  var result = regexp.exec(document.cookie);
  return (result === null) ? null : result[1];
Using getCookie() is very simple. You simply pass the key as a parameter like as shown below.
console.log(getCookie("author")); // print aurelio
console.log(getCookie("nothing")); // print null
Now we need the last function to delete a cookie. The function shown is very simple because it relies on getCookie() to test if the given name is set, and createCookie() to set the expiration date in the past.
function deleteCookie(name, path, domain) {
  // If the cookie exists
  if (getCookie(name))
    createCookie(name, "", -1, path, domain);
Given that function, to delete a cookie you can simply write:
console.log(getCookie("author")); // now print null
Using the functions shown, you’ll be able to easily manage cookies. The web is also full of plenty of other cookie handling functions. Of the plethora of functions you can find, I’d like to show the ones written by Peter-Paul Koch (P.P.K.), a guru of front-end development, on I’d like to thank him for allowing me to include them in this article. P.P.K’s function to create a cookie is shown below.
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    var expires = "; expires="+date.toGMTString();
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
Similarly, to retrieve a cookie, use the following function.
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  return null;
And this is the function to delete a cookie.
function eraseCookie(name) {


Throughout this article you learned what cookies are, how they are made, and their strengths and weaknesses. You’ve also seen how you can deal with cookies using custom functions. As I also pointed out in my previous article, JavaScript lacks some basic utility functions. Luckily, you can easily build your own or search the web to solve your problems.

Frequently Asked Questions (FAQs) about Handling Cookies in JavaScript

How can I set a cookie in JavaScript?

Setting a cookie in JavaScript is quite straightforward. You can use the document.cookie property. Here’s a simple example:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

In this example, we’re setting a cookie named “username” with the value “John Doe”. The expires attribute sets the expiry date of the cookie in GMT format. The path attribute specifies the directory for which the cookie is valid. If not specified, it takes the current page.

How can I read a cookie in JavaScript?

Reading a cookie in JavaScript involves accessing the document.cookie object, which returns all cookies in one string, with each cookie separated by a semicolon and a space. Here’s an example:

var allCookies = document.cookie;

To get a specific cookie by name, you’ll need to parse this string.

How can I delete a cookie in JavaScript?

Deleting a cookie in JavaScript is done by setting the cookie’s expiry date to a past date. Here’s an example:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

In this example, we’re setting the “username” cookie’s expiry date to January 1, 1970, effectively deleting it.

What are the security implications of using cookies?

Cookies can pose a security risk if not handled properly. They can be used for session hijacking and cross-site scripting attacks. To mitigate these risks, use the Secure and HttpOnly attributes when setting cookies. The Secure attribute ensures the cookie is only sent over HTTPS, while the HttpOnly attribute prevents the cookie from being accessed via JavaScript.

How can I make my cookies secure in JavaScript?

To make your cookies secure in JavaScript, use the Secure and HttpOnly attributes when setting them. Here’s an example:

document.cookie = "username=John Doe; Secure; HttpOnly";

In this example, the Secure attribute ensures the cookie is only sent over HTTPS, while the HttpOnly attribute prevents the cookie from being accessed via JavaScript.

What is the maximum size of a cookie?

The maximum size of a cookie is 4KB. This includes the name, value, expiry date, and all other attributes. If you need to store more data, consider using local storage or a server-side database.

What is the difference between session cookies and persistent cookies?

Session cookies are deleted when the user closes the browser, while persistent cookies remain on the user’s device until they expire or are manually deleted. You can create a session cookie by not setting the expires attribute when setting the cookie.

Can I use cookies to store sensitive information?

It’s not recommended to store sensitive information in cookies, as they can be easily accessed and manipulated. If you need to store sensitive information, consider using server-side sessions or a database.

How can I check if cookies are enabled in the user’s browser?

You can check if cookies are enabled in the user’s browser by using the navigator.cookieEnabled property. This property returns a boolean value indicating whether cookies are enabled or not.

Can I access cookies from different domains?

No, you can’t access cookies from different domains due to the same-origin policy. This policy restricts how a document or script loaded from one origin can interact with a resource from another origin. It’s a critical security mechanism for isolating potentially malicious documents.

Aurelio De RosaAurelio De Rosa
View Author

I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form