JavaScript Cookies

How to set and get cookies in JavaScript?

In this tutorial, we will learn to get and set cookies in JavaScript.

Cookies are text files that include small amounts of data, such as some user information, and are useful to identify your machine when you connect to a computer network.

In the form of a cookie, your server delivers data to the visitor’s browser with the web page. Cookies are stored on the device used to view a website, and a user’s device may get multiple cookies throughout a session.

Parameters of javaScript.cookies

Expires

The date on which the cookie will expire. If this field is empty, the cookie will expire when the visitor closes the browser.


Domain

The domain name of your website.


Path

The path to the directory or web page where the cookie was set. If you wish to obtain the cookie from any directory or page, leave this field empty.

Secure


If this field contains the word “secure,” the cookie can only be available through a secure server. If this field is empty, there is no such restriction.


key=value

Cookies are set and retrieved as key-value pairs.

How to create a Cookie with JavaScript?

With the cookie property document.cookie, JavaScript may create, read, and delete cookies.

document.cookie = "username=John Doe";

Add an expiry date to cookies

You can also include an expiration date. Provide the UTC time while setting the cookie. If you specify a correct date or time, the cookie will expire on that date or time, and the cookie’s value will no longer be available. When the browser is closed, the cookie is automatically deleted if it is empty.

document.cookie = "username=John Doe; expires=Sun, 01 Jan 2023 10:00:00 UTC";

The path parameter

A path parameter tells the browser which route the cookie belongs to. By default, the cookie is associated with the current page.

document.cookie = "username=John Doe; expires=Sun, 01 Jan 2023 10:00:00 UTC", path=/;

How to read a cookie with JavaScript?

In javascript reading a cookie is simple. You can read like this:

let cookiesData = document.cookie;

document.cookie will return all cookies in a single string, similar to cookie1=value; cookie2=value; cookie3=value; and so on. you may use this string to access the cookie whenever you want.

To split a string into keys and values, use the split() function as shown below:

cookiesData.split(';');

How to change a cookie with JavaScript?

JavaScript allows you to modify the cookie. You can change a cookie in the same way that you create it with JavaScript. In this way, you will overwrite the old cookie.

document.cookie = "username=John Smith; path=/path2";

How to delete a cookie?

You may need to erase a cookie from time to time. To achieve this, simply set the expiry date to a date in the past.

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

Read more about cookies on mozilla.org

Read Switch statement in JavaScript, All types of loops in JavaScript with examples.

Set, Get, Update and Delete cookies using the JavaScript module ( js-cookie )

The js-cookie is a simple, lightweight JavaScript API for cookie management. You can install it using npm.

npm i js-cookie

Alternatively, You may also use the CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js"></script>

Basic usage of js-cookie

import Cookies from 'js-cookie'

Cookies.set('foo', 'bar')

Create a cookie that will be valid across the entire site.

Cookies.set('name', 'value')

The cookie will expire in 7 days and will be valid throughout the entire site.

Cookies.set('name', 'value', { expires: 7 })

Create an expiring cookie, valid to the path of the current page:

Cookies.set('name', 'value', { expires: 7, path: '' })

Read the cookie:

Cookies.get('name') // => 'value'
Cookies.get('nothing') // => undefined

Read all visible cookies.

Cookies.get() // => { name: 'value' }

Delete the cookie:

Cookies.remove('name')

Delete a cookie valid to the path of the current page:

Cookies.set('name', 'value', { path: '' })
Cookies.remove('name') // fail!
Cookies.remove('name', { path: '' }) // removed!

Read more about js-cookie here.

Add comment