Working with Cookies in JavaScript

Сookie (web cookie or browser cookie) is a string of information that can be stored in a browser and sent to the server.

The maximum size for one cookie is 4096 bytes. The number of cookies for one domain can be from 20 to 242, depending on the browser.

Cookies are written as a string, but on a key-to-value basis.

document.cookie = "username=John Brown";

Cookies may contain parameters

path

path=/admin;

To set access only on certain pages. The default is for the current page.

domain

domain=example.com;

Sets the domain. In the absence of access to subdomains is not possible. By default is absent. That is, to access the same cookie on sub.site.com and site.com, you need to set domain = site.com;

max-age

expires

expires=Sat, 29 Feb 2020 14:00:00 GMT;

Indicates the date by a string in GMT format. Can be obtained using Date.toUTCString(). The cookie expiration date after which the browser will delete it.

max-age=3600

Alternative to expires. Indicated in seconds. If the max-age value is 0 or less, then the cookie is deleted. By default, neither expires nor max-age is set, and the cookie only lives until the browser closes.

secure

secure;

The setting allows you to transfer cookies only over the https protocol.

samesite

SameSite=Strict;

or

SameSite=Lax;

Another security setting. From CSRF attack.

Parameters example

document.cookie = "username=John Brown; path=/; domen=site.com; max-age=3600";

Directly working with the string is not very convenient. Better to work with cookies using functions.

Get Cookie

function getCookie(name) {

    let matches = document.cookie.match(new RegExp(
      "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ))
    return matches ? decodeURIComponent(matches[1]) : undefined
}

Set Cookie

function setCookie(name, value, options = {}) {

  options = {
    path: '/',
    ...options
  };

  if (options.expires instanceof Date) {
    options.expires = options.expires.toUTCString();
  }

  let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

  for (let optionKey in options) {
    updatedCookie += "; " + optionKey;
    let optionValue = options[optionKey];
    if (optionValue !== true) {
      updatedCookie += "=" + optionValue;
    }
  }

  document.cookie = updatedCookie;
}

Delete Cookie

function deleteCookie(name) {
  setCookie(name, "", {
    'max-age': -1
  })
}