What are JavaScipt Cookies ?

What are JavaScipt Cookies ?

tarunkumar pal's photo
tarunkumar pal
·

3 min read

what is Cookies?

Cookies are small pieces of data that are stored on a user's computer by websites they visit. They are commonly used to store information that can be retrieved and utilized by the website in subsequent visits. Cookies are sent from the server to the user's browser and then stored on the user's computer.

To create a cookie, you can set the document.cookie property to a string containing the cookie name, value, and optional parameters such as expiration date and path.

document.cookie = "cookieName=cookieValue; expires=Thu, 18 May 2023 12:00:00 UTC; path=/";

cookieName :- The name of the cookie you want to create.
cookieValue :- The value you want to assign to the cookie.
expires :- The cookie's expiration date and time (optional).
path:- The cookie's availability path (optional).

for example

document.cookie = "username=john" expires=Thu, 18 May 2023 12:00:00 UTC; path=/login";

The document.cookie property returns a string containing all the cookies associated with the current document. To read a specific cookie, you can parse this string and extract the value of the desired cookie.

function getCookie(cookieName) {
  const cookies = document.cookie.split(';');
  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();
    if (cookie.startsWith(cookieName + '=')) {
      return cookie.substring(cookieName.length + 1);
    }
  }
  return null;
}

const value = getCookie("cookieName");
console.log(value);

Here, we used semicolon to separate the document.cookie string into individual cookies. Then we loop through each cookie and see if it begins with "cookieName=". If it does, we extract the cookie value and log it to the console.

To delete a cookie, you can set its expiration date to a past date. This will cause the browser to remove the cookie.

document.cookie = "cookieName=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Applications of Cookies

  1. Session Management: Cookies are commonly used to manage user sessions. They can store a session ID or other information that identifies the user, allowing the server to recognize and authenticate the user across multiple requests.

  2. Personalization: Cookies can be used to remember user preferences and settings. For example, a website may store a user's language preference or theme choice in a cookie to provide a personalized experience.

  3. Tracking and Analytics: Cookies can be used for tracking user behavior and collecting analytics data. This helps website owners understand how users interact with their site, which pages they visit, and other information that can be used for marketing and optimization purposes.

  4. Targeted Advertising: Cookies are often used in advertising to track user interests and display targeted ads. Ad networks can use cookies to deliver ads that are relevant to the user's browsing history and preferences.

Limitations of Cookies

  • Size Limit: Cookies have a maximum size limit (usually 4KB) imposed by most browsers.

  • Domain Restriction: Cookies are associated with a specific domain, and by default, they are sent to that domain with every request. This restricts the use of cookies across different domains (known as the same-origin policy) unless explicitly allowed by setting appropriate attributes.

  • Security Concerns: Cookies are vulnerable to security risks such as cross-site scripting (XSS) attacks and cross-site request forgery (CSRF). It's crucial to properly handle and sanitize cookie values to prevent such security vulnerabilities.

javascript-cookies