Cookies are small pieces of data that are stored in the browser and associated with a particular website. They can be used to store user preferences, track user behavior, and more. In this tutorial, we will learn how to work with cookies in JavaScript.

Writing Cookies

To write a cookie, you can use the setCookie function:

function setCookie(name, value, expires, path, domain, secure) {
  var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

  if (expires) cookie += '; expires=' + expires.toGMTString();
  if (path) cookie += '; path=' + path;
  if (domain) cookie += '; domain=' + domain;
  if (secure) cookie += '; secure';

  document.cookie = cookie;
}

This function takes the following parameters:

• name: the name of the cookie

• value: the value of the cookie

• expires: a Date object that specifies when the cookie should expire

• path: the path for which the cookie is valid

• domain: the domain for which the cookie is valid

• secure: a boolean value that specifies whether the cookie should only be sent over secure connections

Here is an example of how to use the setCookie function:

Cookie('user', 'John Doe', new Date(2022, 12, 31), '/', 'example.com', true);

This will create a cookie named user with the value 'John Doe' that expires on December 31, 2022, is valid for the root path of example.com, and is only sent over secure connections.

Reading Cookies

To read a cookie, you can use the getCookie function:

function getCookie(name) {
  var nameEQ = encodeURIComponent(name) + '=';
  var cookies = document.cookie.split(';');

  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length);
    if (cookie.indexOf(nameEQ) === 0) return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length));
  }

  return null;
}

This function takes the following parameter:

• name: the name of the cookie to read

It returns the value of the cookie, or null if the cookie does not exist.

Here is an example of how to use the getCookie function:

var user = getCookie('user'); console.log(user); // 'John Doe'

This will read the user cookie and log its value to the console.

Deleting Cookies

To delete a cookie, you can set its expiration date to a date in the past using the setCookie function:

setCookie('user', '', new Date(1970, 1, 1), '/', 'example.com', true);

This will delete the user cookie by setting its expiration date to January 1, 1970.

Full Example

Here is an example of how to use the setCookie, getCookie, and deleteCookie functions in a complete JavaScript program:

function setCookie(name, value, expires, path, domain, secure) {
  var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

  if (expires) cookie += '; expires=' + expires.toGMTString();
  if (path) cookie += '; path=' + path;
  if (domain) cookie += '; domain=' + domain;
  if (secure) cookie += '; secure';

  document.cookie = cookie;
}

function getCookie(name) {
  var nameEQ = encodeURIComponent(name) + '=';
  var cookies = document.cookie.split(';');

  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) === ' ') cookie = cookie.substring(1, cookie.length);
    if (cookie.indexOf(nameEQ) === 0) return decodeURIComponent(cookie.substring(nameEQ.length, cookie.length));
  }

  return null;
}

function deleteCookie(name, path, domain, secure) {
  setCookie(name, '', new Date(1970, 1, 1), path, domain, secure);
}

setCookie('user', 'John Doe', new Date(2022, 12, 31), '/', 'example.com', true);
console.log(getCookie('user')); // 'John Doe'
deleteCookie('user', '/', 'example.com', true);
console.log(getCookie('user')); // null

This program will create a user cookie with the value 'John Doe', read the value of the cookie, and then delete the cookie.

I hope this tutorial helps you understand how to handle cookies in JavaScript. Let me know if you have any questions!

That's it.