How to get and set cookies with JavaScript

You can access the cookies for a particular page by referencing the cookie property of the document object. i.e. document.cookie. For example, on this page it might look something like this:

"__amplitudeDeviceID=5a80df15-5e17-4d9c-96ad-d7cdd5c9a392; hn-cookie-username=ckgao2eh000003h64tsqx0dhx; __gacid=cee040d8-3c13-4da6-8f56-f58e54c476f3; __acquisitionSource=blog-footer; _hjid=c1c759b9-2f9a-45b2-a90f-8dd04549e76e; _hjIncludedInPageviewSample=1; _hjAbsoluteSessionInProgress=1; __acquisitionURL=https://hashnode.com; hn-user=5da7008dc6d94e4b3b607a4b; __hncsrf=-HezIudC06Uch767NzYTFC7K

To set a new cookie you simply assign a new string to document.cookie.

For example, to create a new cookie with a name of user and a value of james:

document.cookie = 'user=james';

It might look like you’re going to remove all the other cookies by doing this but the above will just set a new cookie with the name of user and a value of james. If there are any other cookies stored on the page they'll be preserved.

Cookies are stored in a string on the document.cookie property so getting a particular cookie value requires a bit of work.

If you want to get a particular cookie value you need to manipulate the cookie string.

One possibility is by splitting it into an array with a semi-colon as the delimiter.

document.cookie.split(';')

You will still need to do a bit of work to get the value of a particular cookie (like splitting each string in the array further by its = symbol , then search for the name of the cookie).

Alternatively, you can reduce the split cookie array to a single object.

Here's one approach of doing that:

document.cookie
  .split(';')
  .map(cookie => cookie.split('='))
  .reduce((accumulator, [key, value]) => ({ ...accumulator, [key.trim()]: decodeURIComponent(value)
}), {});

Running the above code on this page would put the cookie string into an object a bit like this:

{
  __amplitudeDeviceID: "5a80df15-5e17-4d9c-96ad-d7cdd5c9a392",
  hn-cookie-username: "ckgao2eh000003h64tsqx0dhx",
  __gacid: "cee040d8-3c13-4da6-8f56-f58e54c476f3",
  __acquisitionSource: "blog-footer",
  _hjid: "c1c759b9-2f9a-45b2-a90f-8dd04549e76e", …
}

Follow me on Twitter for more tutorials 👍