# How to create and read cookies in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jun 20, 2021, updated Aug 14, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-cookies

> A complete guide to learning about HTTP cookies, and how to read, write, and delete cookies using JavaScript.

An HTTP cookie (also known as **web cookie**, **browser cookie**) is a small piece of information stored by the server in the user's browser. Cookies are commonly used for session management, user-tracking, and storing user preferences.

In JavaScript, you can use the `document.cookie` property to create, read, and delete cookies. Note that the `document.cookie` property can only access cookies with the `HttpOnly` attribute unspecified.

## Creating a Cookie

To create a new cookie in JavaScript, assign a `name=value` string to `document.cookie`:

```javascript
document.cookie = 'name=John Doe'
```

Since the cookie value can not contain semicolons, commas, or spaces, you need the `encodeURIComponent()` function to [encode the value](https://attacomsian.com/blog/javascript-encode-url#encodeuricomponent) before storing it in the cookie:

```javascript
document.cookie = `name=${encodeURIComponent('John Doe')}`
```

> **Note:** When you set the value of `document.cookie`, the web browser does not overwrite existing cookies. Instead, it adds a new HTTP cookie to the user's computer.

### Cookie Expiration Date

By default, the above cookie lifespan is the current browser session, which means that it is removed when the user closes the browser. Such cookies are called **session cookies**.

To **persist cookies** beyond the current browser session, you need to specify its expiry date either using the `expires` attribute (in UTC/GMT format)  or the `max-age` attribute (in seconds):

```javascript
// Set cookie fixed expiration date
document.cookie = `name=${encodeURIComponent('John Doe')}; expires=Sun, 14 August 2022 03:11:45 UTC`

// Set cookie max age, e.g. expire after 7 days
document.cookie = `name=${encodeURIComponent('John Doe')}; max-age=${7 * 24 * 60 * 60}`
```

### Cookie Path

By default, a cookie is available to all web pages in the same directory and its subdirectories. However, you can explicitly specify a `path` attribute to ensure that the cookie is only accessible to that path and its subdirectories.

For example, if set the `path`  to `/`, the cookie will be available throughout the website regardless of which page creates it:

```javascript
document.cookie = `name=${encodeURIComponent('John Doe')}; path=/`
```

### Cookie Domain

The cookies, by default, are available only to the web pages in the domain they were used to set in. However, you can use the `domain` attribute to make a cookie available across subdomains.

For exmaple, if a cookie created by a web page on `help.example.com` sets its `path` to `/` and its `domain` to `example.com`, that cookie is also available to all web pages on `blog.example.com`, `dash.example.com`, etc.

```javascript
document.cookie = `name=${encodeURIComponent('John Doe')}; path=/; domain=example.com`
```

### Secure Cookie

You can also make a cookie secure using the `secure` attribute. Such cookies are only transmitted over a secure (i.e. encrypted) connection such as HTTPS:

```javascript
document.cookie = `name=${encodeURIComponent('John Doe')}; path=/; domain=example.com; secure`
```

Finally, let us write a JavaScript function that takes in the name, value, expiry days, path, and domain, and adds an HTTP cookie:

```javascript
const setCookie = (name, value, days, path, domain, secure) => {
  let cookie = `${name}=${encodeURIComponent(value)}`

  // Add expiry date
  if (days) {
    const expiry = new Date()
    expiry.setDate(expiry.getDate() + days)
    cookie += `; expires=${expiry.toUTCString()}`
  }

  // Add Path, Domain, and Secure
  if (path) cookie += `; path=${path}`
  if (domain) cookie += `; domain=${domain}`
  if (secure) cookie += `; secure`

  // Set an HTTP cookie
  document.cookie = cookie
}
```

Now to set a cookie that lasts 3 months, use the following code:

```javascript
setCookie('name', 'John Doe', 90);
```

## Reading a Cookie

The `document.cookie` property returns all cookies set by the server as a series of key-value pairs separated by semi-colons:

```javascript
const cookies = document.cookie

console.log(cookies)
// _ga=GA1.2.315746813.1624003242; lesson_completed=false; theme=dark
```

Since all the values and names are URL-encoded, you have to [decode](https://attacomsian.com/blog/javascript-decode-url#decodeuricomponent) them using the `decodeURIComponent()` method.

Let us write a function that takes the cookie name as input and returns its value. If the cookie is not found, it should return a `null` value.

```javascript
const getCookie = name => {
  const cookies = document.cookie.split(';')
  for (let i = 0; i < cookies.length; i++) {
    let c = cookies[i].trim().split('=')
    if (c[0] === name) {
      return decodeURIComponent(c[1])
    }
  }
  return ''
}

console.log(getCookie('_ga'))
// GA1.1.1736818142.1621579881
```

The above code uses the JavaScript `split()` method to [split the cookie string](https://attacomsian.com/blog/javascript-string-split) by semi-colon. Then it [iterates](https://attacomsian.com/blog/javascript-loops) through the result array to match the name of the requested cookie with the key-value pairs.


## Updating a Cookie

You can update a cookie in the same way as you create it with the same name, path, domain, and secure option:

```javascript
document.cookie = 'name=Alex; expires=Mon, 15 August 2022 10:52:32 UTC'
```

Alternatively, you could also use the above `setCookie()` function:

```javascript
setCookie('name', 'Alex', 10)
```

## Deleting a Cookie

Deleting a cookie is very simple. All you need to do is set the expiration date to some time in the past with the same name, path, domain, and secure option:

```javascript
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 UTC"
```

You can also use the `setCookie()` function to remove the cookie:

```javascript
setCookie('name', '', -1)
```

**Read Next:** [How to use cookies in Spring Boot](https://attacomsian.com/blog/cookies-spring-boot)