Javascript function to get cookie value by name

A function to get cookie value by name would be extremely useful for web developers who want to create dynamic web pages. By being able to access the value of a cookie, developers can store user preferences or track user behavior.

function get_cookie(cookie_name) {
    let c_name = cookie_name + "=";
    let cookie_decoded = decodeURIComponent(document.cookie);
    let cookie_parts = cookie_decoded.split(';');
    
    for(let i = 0; i <cookie_parts.length; i++) {
        let c = cookie_parts[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(c_name) == 0) {
            return c.substring(c_name.length, c.length);
        }
    }
    return "";
}

In this post, we will explain multiple methods to get a cookie value by using its name.

1. This function returns the value of a specified cookie.

2. The function first defines a variable c_name, which stores the cookie name concatenated with an equal sign.

3. Then, it decodes any encoded characters in the cookie using the decodeURIComponent() function.Next, the function splits the cookie string into individual parts using the split() method.

4. Then, it loops through each part of the cookie string and checks if the part contains the cookie name. If it does, the function returns the value of the cookie. If the cookie name is not found, the function returns undefined.

By using the document.cookie property, we can get a list of all cookies associated with the current page. This list is a string of name-value pairs, separated by semicolons. To get the value of a specific cookie, we can use the split() method to split the string into an array of name-value pairs, and then use the indexOf() method to find the name we're looking for.

Javascript function to get cookie value without using For loop

If you do not want to use the For loop in your get_cookie() function then you can use the below code.

function get_cookie(cookie_name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + cookie_name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

Walkthrough

1. This code defines a function to get a specific cookie from the document.

2. The value variable is set to a string containing all of the cookies from the document.

3. The parts variable is set to an array containing two parts, the first of which is the cookie name and the second is the cookie value.

4. If the parts array has two parts, then the cookie value is returned. Otherwise, undefined is returned.

cookie_name is the string parameter that will be passed to the get_cookie() function to get the cookie value.

For example, if you have a uuid named cookie on your website and you want to access its value using the above functions then you can use the below code to get the cookie value.

var uuid_value = get_cookie("uuid");

The above function will return undefined if the cookie does not exist and returns the cookie value if it exists.

Was this helpful?