Set Cookie and Get Cookie with Javascript

Set cookie and get cookie with JavaScript

Working with cookies is a common task when developing web applications. Cookies are small pieces of data that are stored on the user’s browser. They can be used to remember user preferences, track user activity, and more. In JavaScript, there are built-in methods for setting and getting cookies. In this blog post, we will explore how to set a cookie and retrieve its value using JavaScript.

Setting a cookie

To set a cookie in JavaScript, you can use the document.cookie property. This property allows you to read and write cookies. To set a cookie, you need to assign a string value to document.cookie in the following format:

document.cookie = "cookieName=cookieValue; expires=expiryDate; path=pathValue";

Let’s break down the components of the cookie string:

• cookieName: The name of the cookie.
• cookieValue: The value of the cookie.
• expires: The expiry date of the cookie. If not specified, the cookie will be deleted when the browser is closed.
• path: The path on the server where the cookie is valid. If not specified, the cookie will be valid for the current page.

Here’s an example of setting a cookie:

// Set a cookie with name "username" and value "John Doe"
document.cookie = "username=John Doe";

Getting a cookie

To retrieve the value of a cookie, you can use the document.cookie property. However, the document.cookie property returns all the cookies as a single string. To extract the value of a specific cookie, you need to parse the string. Here’s an example:

function getCookie(cookieName) {
  var name = cookieName + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var cookieArray = decodedCookie.split(';');
  
  for(var i = 0; i < cookieArray.length; i++) {
    var cookie = cookieArray[i];
    
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }
    
    if (cookie.indexOf(name) === 0) {
      return cookie.substring(name.length, cookie.length);
    }
  }
  
  return "";
}

// Get the value of the cookie named "username"
var username = getCookie("username");
console.log(username); // Output: John Doe

In the getCookie function above, we first decode the cookie string using decodeURIComponent. Then, we split the string into an array of cookies using the ';' separator. We iterate over the array and extract the value of the cookie that matches the specified name.

By using the document.cookie property and the getCookie function, you can easily set and retrieve cookies in JavaScript.

Remember to handle cookie values securely and be mindful of any privacy concerns when working with cookies.

Final Output:

<

pre>

document.cookie = "cookieName=cookieValue; expires=expiryDate; path=pathValue";