Get cookie by name

JavascriptCookies

Javascript Problem Overview


I have a getter to get the value from a cookie.

Now I have 2 cookies by the name shares= and by the name obligations= .

I want to make this getter only to get the values from the obligations cookie.

How do I do this? So the for splits the data into separate values and puts it in an array.

 function getCookie1() {
    // What do I have to add here to look only in the "obligations=" cookie? 
    // Because now it searches all the cookies.

    var elements = document.cookie.split('=');
    var obligations= elements[1].split('%');
    for (var i = 0; i < obligations.length - 1; i++) {
        var tmp = obligations[i].split('$');
        addProduct1(tmp[0], tmp[1], tmp[2], tmp[3]);
    }
 }

Javascript Solutions


Solution 1 - Javascript

One approach, which avoids iterating over an array, would be:

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

Walkthrough

Splitting a string by token will produce either, an array with one string (same value), in case token does not exist in a string, or an array with two strings , in case token is found in a string .

The first (left) element is string of what was before the token, and the second one (right) is what is string of what was after the token.

(NOTE: in case string starts with a token, first element is an empty string)

Considering that cookies are stored as follows:

"{name}={value}; {name}={value}; ..."

in order to retrieve specific cookie value, we just need to get string that is after "; {name}=" and before next ";". Before we do any processing, we prepend the cookies string with "; ", so that every cookie name, including the first one, is enclosed with "; " and "=":

"; {name}={value}; {name}={value}; ..."

Now, we can first split by "; {name}=", and if token is found in a cookie string (i.e. we have two elements), we will end up with second element being a string that begins with our cookie value. Then we pull that out from an array (i.e. pop), and repeat the same process, but now with ";" as a token, but this time pulling out the left string (i.e. shift) to get the actual token value.

Solution 2 - Javascript

I would prefer using a single regular expression match on the cookie:

window.getCookie = function(name) {
  var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  if (match) return match[2];
}

OR Also we are able to use as a function , check below code.

function check_cookie_name(name) 
    {
      var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
      if (match) {
        console.log(match[2]);
      }
      else{
           console.log('--something went wrong---');
      }
   }

Improved thanks to Scott Jungwirth in the comments.

Solution 3 - Javascript

If you use jQuery I recommend you to use this plugin:

https://github.com/carhartl/jquery-cookie
https://github.com/carhartl/jquery-cookie/blob/master/jquery.cookie.js

<script type="text/javascript"
 src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js">

So you can read cookie like this:

var value = $.cookie("obligations");

Also you can write cookie:

$.cookie('obligations', 'new_value');
$.cookie('obligations', 'new_value', { expires: 14, path: '/' });

Delete cookie:

$.removeCookie('obligations');

Solution 4 - Javascript

The methods in some of the other answers that use a regular expression do not cover all cases, particularly:

  1. When the cookie is the last cookie. In this case there will not be a semicolon after the cookie value.
  2. When another cookie name ends with the name being looked up. For example, you are looking for the cookie named "one", and there is a cookie named "done".
  3. When the cookie name includes characters that are not interpreted as themselves when used in a regular expression unless they are preceded by a backslash.

The following method handles these cases:

function getCookie(name) {
    function escape(s) { return s.replace(/([.*+?\^$(){}|\[\]\/\\])/g, '\\$1'); }
    var match = document.cookie.match(RegExp('(?:^|;\\s*)' + escape(name) + '=([^;]*)'));
    return match ? match[1] : null;
}

This will return null if the cookie is not found. It will return an empty string if the value of the cookie is empty.

Notes:

  1. This function assumes cookie names are case sensitive.
  2. document.cookie - When this appears on the right-hand side of an assignment, it represents a string containing a semicolon-separated list of cookies, which in turn are name=value pairs. There appears to be a single space after each semicolon.
  3. String.prototype.match() - Returns null when no match is found. Returns an array when a match is found, and the element at index [1] is the value of the first matching group.

Regular Expression Notes:

  1. (?:xxxx) - forms a non-matching group.
  2. ^ - matches the start of the string.
  3. | - separates alternative patterns for the group.
  4. ;\\s* - matches one semi-colon followed by zero or more whitespace characters.
  5. = - matches one equal sign.
  6. (xxxx) - forms a matching group.
  7. [^;]* - matches zero or more characters other than a semi-colon. This means it will match characters up to, but not including, a semi-colon or to the end of the string.

Solution 5 - Javascript

4 years later, ES6 way simpler version.

function getCookie(name) {
  let cookie = {};
  document.cookie.split(';').forEach(function(el) {
    let [k,v] = el.split('=');
    cookie[k.trim()] = v;
  })
  return cookie[name];
}

I have also created a gist to use it as a Cookie object. e.g., Cookie.set(name,value) and Cookie.get(name)

This read all cookies instead of scanning through. It's ok for small number of cookies.

Solution 6 - Javascript

Here is a one liner to get a cookie value with a specific name without the need of any external lib:

const value = ('; '+document.cookie).split(`; COOKIE_NAME=`).pop().split(';')[0];

This answer is based on kirlich's brilliant solution. The only compromise of this solution is, that you will get an empty string when the cookie does not exist. In most cases this should not be a deal breaker, though.

Solution 7 - Javascript

I have modified the function that Jonathan provided here, by using regular expression you can get a cookie value by its name like this:

function getCookie(name){
    var pattern = RegExp(name + "=.[^;]*")
    var matched = document.cookie.match(pattern)
    if(matched){
        var cookie = matched[0].split('=')
        return cookie[1]
    }
    return false
}

If it returns empty string it means that the cookie exists but has no value, if it returns false then the cookie doesn't exist. I hope this helps.

Solution 8 - Javascript

You can use js-cookie library to get and set JavaScript cookies.

Include to your HTML:

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

To create a Cookie:

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

To read a Cookie:

Cookies.get('name'); // => 'value'

Solution 9 - Javascript

One liner to convert cookie into JavaScript Object or Map

Object.fromEntries(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))
new Map(document.cookie.split('; ').map(v=>v.split(/=(.*)/s).map(decodeURIComponent)))

Solution 10 - Javascript

Here is a pretty short version

 function getCookie(n) {
    let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
    return a ? a[1] : '';
}

Note that I made use of ES6's template strings to compose the regex expression.

Solution 11 - Javascript

I know it is an old question but I came across this problem too. Just for the record, There is a little API in developers mozilla web page.

Yoy can get any cookie by name using only JS. The code is also cleaner IMHO (except for the long line, that I'm sure you can easily fix).

function getCookie(sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
}

As stated in the comments be aware that this method assumes that the key and value were encoded using encodeURIComponent(). Remove decode & encodeURIComponent() if the key and value of the cookie were not encoded.

Solution 12 - Javascript

My one linear function to get the value cookie by its key.

cookie = key=>((new RegExp((key || '=')+'=(.*?); ','gm')).exec(document.cookie+'; ') ||['',null])[1]

>Call cookie function as

cookie('some-key')

Solution 13 - Javascript

A simple way :)

const cookieObj = new URLSearchParams(document.cookie.replaceAll("; ","&"))
cookieObj.get("your-cookie-name")

Solution 14 - Javascript

function getCookie(name) {
    var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
    if (pair)
       return pair.split('=')[1]
}

Solution 15 - Javascript

Use object.defineProperty

With this, you can easily access cookies

Object.defineProperty(window, "Cookies", {
	get: function() {
		return document.cookie.split(';').reduce(function(cookies, cookie) {
			cookies[cookie.split("=")[0]] = unescape(cookie.split("=")[1]);
			return cookies
		}, {});
	}
});

From now on you can just do:

alert( Cookies.obligations );

This will automatically update too, so if you change a cookie, the Cookies will change too.

Solution 16 - Javascript

kirlich gave a good solution. However, it fails when there are two cookie values with similar names, here is a simple fix for this situation:

function getCookie(name) {
  var value = "; " + document.cookie;
  var parts = value.split("; " + name + "=");
  if (parts.length >= 2) return parts.pop().split(";").shift();
}

Solution 17 - Javascript

It seems to me you could split the cookie key-value pairs into an array and base your search on that:

var obligations = getCookieData("obligations");

Which runs the following:

function getCookieData( name ) {
    var pairs = document.cookie.split("; "),
        count = pairs.length, parts; 
    while ( count-- ) {
        parts = pairs[count].split("=");
        if ( parts[0] === name )
            return parts[1];
    }
    return false;
}

Fiddle: http://jsfiddle.net/qFmPc/

Or possibly even the following:

function getCookieData( name ) {
    var patrn = new RegExp( "^" + name + "=(.*?);" ),
        patr2 = new RegExp( " " + name + "=(.*?);" );
    if ( match = (document.cookie.match(patrn) || document.cookie.match(patr2)) )
        return match[1];
    return false;
}

Solution 18 - Javascript

always works well:

function getCookie(cname) {
    var name = cname + "=",
        ca = document.cookie.split(';'),
        i,
        c,
        ca_length = ca.length;
    for (i = 0; i < ca_length; i += 1) {
        c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) !== -1) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function setCookie(variable, value, expires_seconds) {
    var d = new Date();
    d = new Date(d.getTime() + 1000 * expires_seconds);
    document.cookie = variable + '=' + value + '; expires=' + d.toGMTString() + ';';
}

No requirements for jQuery or anything. Pure old good JavaScript.

Solution 19 - Javascript

Simple function for Get cookie with cookie name:

function getCookie(cn) {
	var name = cn+"=";
	var allCookie = decodeURIComponent(document.cookie).split(';');
	var cval = [];
	for(var i=0; i < allCookie.length; i++) {
		if (allCookie[i].trim().indexOf(name) == 0) {
			cval = allCookie[i].trim().split("=");
		}	
	}
	return (cval.length > 0) ? cval[1] : "";
}

Solution 20 - Javascript

Apparently MDN has never heard of the word-boundary regex character class \b, which matches contiguous \w+ that is bounded on either side with \W+:

getCookie = function(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : null;
};

var obligations = getCookie('obligations');

Solution 21 - Javascript

In my projects I use following function to access cookies by name

function getCookie(cookie) {
    return document.cookie.split(';').reduce(function(prev, c) {
        var arr = c.split('=');
        return (arr[0].trim() === cookie) ? arr[1] : prev;
    }, undefined);
}

Solution 22 - Javascript

set by javascript

document.cookie = 'cookiename=tesing';

get by jquery with the jquery-cookie plugin

var value = $.cookie("cookiename");

alert(value);

Solution 23 - Javascript

There are already nice answers here for getting the cookie,However here is my own solution :

function getcookie(cookiename){
var cookiestring  = document.cookie;
var cookiearray = cookiestring.split(';');
for(var i =0 ; i < cookiearray.length ; ++i){ 
    if(cookiearray[i].trim().match('^'+cookiename+'=')){ 
        return cookiearray[i].replace(`${cookiename}=`,'').trim();
    }
} return null;
}

usage :`

     getcookie('session_id');
   // gets cookie with name session_id

Solution 24 - Javascript

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

Pass the cookie name to getCookie() function to get it's value

Solution 25 - Javascript

My solution is this:

function getCookieValue(cookieName) {
    var ca = document.cookie.split('; ');
    return _.find(ca, function (cookie) {
        return cookie.indexOf(cookieName) === 0;
    });
}

This function uses the Underscorejs _.find-function. Returns undefined if cookie name doesn't exist

Solution 26 - Javascript

I have done it this way. so that i get an object to access to separate the values.With this u can pass the cookie to the parent and then you can access your values by the keys like

var cookies=getCookieVal(mycookie);
alert(cookies.mykey);
function getCookieVal(parent) {
            var cookievalue = $.cookie(parent).split('&');
            var obj = {};
            $.each(cookievalue, function (i, v) {
                var key = v.substr(0, v.indexOf("="));
                var val = v.substr(v.indexOf("=") + 1, v.length);
                
                obj[key] = val;

            });
            return obj;
        }  

Solution 27 - Javascript

Just use the following function (a pure javascript code)

const getCookie = (name) => {
 const cookies = Object.assign({}, ...document.cookie.split('; ').map(cookie => {
    const name = cookie.split('=')[0];
    const value = cookie.split('=')[1];

    return {[name]: value};
  }));

  return cookies[name];
};

Solution 28 - Javascript

I wrote something that might be easy to use, If anyone has some things to add, feel free to do so.

function getcookie(name = '') {
	let cookies = document.cookie;
	let cookiestore = {};
	
	cookies = cookies.split(";");
	
	if (cookies[0] == "" && cookies[0][0] == undefined) {
		return undefined;
	}
	
	cookies.forEach(function(cookie) {
		cookie = cookie.split(/=(.+)/);
		if (cookie[0].substr(0, 1) == ' ') {
			cookie[0] = cookie[0].substr(1);
		}
		cookiestore[cookie[0]] = cookie[1];
	});
	
	return (name !== '' ? cookiestore[name] : cookiestore);
}


Usage

getcookie() - returns an object with all cookies on the web page.

getcookie('myCookie') - returns the value of the cookie myCookie from the cookie object, otherwise returns undefined if the cookie is empty or not set.


Example

// Have some cookies :-)
document.cookie = "myCookies=delicious";
document.cookie = "myComputer=good";
document.cookie = "myBrowser=RAM hungry";

// Read them
console.log( "My cookies are " + getcookie('myCookie') );
// Outputs: My cookies are delicious

console.log( "My computer is " + getcookie('myComputer') );
// Outputs: My computer is good

console.log( "My browser is " + getcookie('myBrowser') );
// Outputs: My browser is RAM hungry

console.log( getcookie() );
// Outputs: {myCookie: "delicious", myComputer: "good", myBrowser: "RAM hungry"}

// (does cookie exist?)
if (getcookie('hidden_cookie')) {
    console.log('Hidden cookie was found!');
} else {
    console.log('Still no cookie :-(');
}

// (do any cookies exist?)
if (getcookie()) {
    console.log("You've got cookies to eat!");
} else {
    console.log('No cookies for today :-(');
}

Solution 29 - Javascript

A functional approach to find existing cookies. It returns an array, so it supports multiple occurrences of the same name. It doesn't support partial key matching, but it's trivial to replace the === in the filter with a regex.

function getCookie(needle) {
    return document.cookie.split(';').map(function(cookiestring) {
        cs = cookiestring.trim().split('=');
    
        if(cs.length === 2) {
            return {'name' : cs[0], 'value' : cs[1]};
        } else {
            return {'name' : '', 'value' : ''};
        }
    })
    .filter(function(cookieObject) { 
        return (cookieObject.name === needle);
    });
}

Solution 30 - Javascript

Get cookie by name just pass the name of cookie to below function

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

Solution 31 - Javascript

Set-Cookie in JS

document.cookie = 'fb-event-id=15648779++';

Get Cookies by name funcation

function getCookie(name) {
    // Split cookie string and get all individual name=value pairs in an array
    var cookieArr = document.cookie.split(";");
    // Loop through the array elements
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        /* Removing whitespace at the beginning of the cookie name
        and compare it with the given string */
        if(name == cookiePair[0].trim()) {
            // Decode the cookie value and return
            return decodeURIComponent(cookiePair[1]);
        }
    } 
    // Return null if not found
    return null;
}

This is how to use the getCookie function

var eventID = getCookie('fb-event-id')

Solution 32 - Javascript

This method working perfectly out of the box

function getCookie(cname) {
  var cookies = ` ${document.cookie}`.split(";");
  var val = "";
  for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].split("=");
    if (cookie[0] == ` ${cname}`) {
      return cookie[1];
    }
  }
  return "";
}

Solution 33 - Javascript

Following function will return a key-value pair of the required cookie, where key is the cookie name and value will be the value of the cookie.

/**
 * Returns cookie key-value pair
 */
var getCookieByName = function(name) {
	var result = ['-1','-1'];
	if(name) {
		var cookieList = document.cookie.split(';');
		result = $.grep(cookieList,function(cookie) { 
			cookie = cookie.split('=')[0];
			return cookie == name;
		});
	}
	return result;
};

Solution 34 - Javascript

Cookies example: example JS:

document.cookies = {
   create : function(key, value, time){
     if (time) {
         var date = new Date();
         date.setTime(date.getTime()+(time*24*60*60*1000));
         var expires = "; expires="+date.toGMTString();
     }
     else var expires = "";
     document.cookie = key+"="+value+expires+"; path=/";
   },
   erase : function(key){
     this.create(key,"",-1);
   },
   read : function(key){
     var keyX = key + "=";
     var ca = document.cookie.split(';');
     for(var i=0;i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
          if (c.indexOf(keyX) == 0) return   c.substring(keyX.length,c.length);
     }
     return null;
   }
}

Store arrays and objects with json or xml

Solution 35 - Javascript

I would do something like this:

function getCookie(cookie){
  return cookie
    .trim()
    .split(';')
    .map(function(line){return line.split(',');})
    .reduce(function(props,line) {
      var name = line[0].slice(0,line[0].search('='));
      var value = line[0].slice(line[0].search('='));
      props[name] = value;
      return props;
    },{})
}

This will return your cookie as an object.

And then you can call it like this:

getCookie(document.cookie)['shares']

Solution 36 - Javascript

I like to use a closure for getting cookie values by name. The closure below will allow you to get a cookie value by name but will only parse the cookie string if it has been updated.

You can retrieve the value of a cookie with the following:

var foo = cookies.get( "bar" );

Code:

var cookies = ( function() {
    var cookieString = null;
    var cookieArray = [];
    
    function getValOf( name ) {
        if ( newCookies() ) {
            parseCookieString()
        }
        return cookieArray[ name ];
    }
    
    // Check if new cookies have been added
    function newCookies() {
        return cookieString === document.cookie;
    }
    
    function parseCookieString() {
        cookieString = document.cookie;
        
        // Separate cookies
        var cookies = cookieString.split( ";" );

        // Empty previous cookies
        cookieArray = [];
        
        // Update cookieArray with new name-value pairs
        for ( var i in cookies ) {

            // Separate name and value
            var nameVal = cookies[ i ].split( "=" );
            var name = nameVal[ 0 ].trim();
            var value = nameVal[ 1 ].trim();

            // Add cookie name value pair to dictionary
            cookieArray[ name ] = value;
        }
    }
    
    return {
        
        /**
         * Returns value or undefined
         */
        get: function( name ) {
            return getValOf( name );
        }  
    };
})();

Solution 37 - Javascript

Just to add an "official" answer to this response, I'm copy/pasting the solution to set and retrieve cookies from [MDN][1] (here's the [JSfiddle][2]

	document.cookie = "test1=Hello";
	document.cookie = "test2=World";

	var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

	function alertCookieValue() {
	  alert(cookieValue);
	}

In you particular case, you would use the following function

	function getCookieValue() {
	  return document.cookie.replace(/(?:(?:^|.*;\s*)obligations\s*\=\s*([^;]*).*$)|^.*$/, "$1");
	}

Note that i only replaced "test2" from the example, with "obligations".

[1]: https://developer.mozilla.org/en-US/docs/Web/API/document/cookie#Example_2_Get_a_sample_cookie_named_test2 "MDN" [2]: https://jsfiddle.net/t9wmtahh/ "JSfiddle"

Solution 38 - Javascript

reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

document.cookie = "test1=Hello";
document.cookie = "test2=World";

var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

  alert(cookieValue);

Solution 39 - Javascript

now you can get cookies to return as an array when you stored cookies in an array format. for example your cookie is array[35]=Khóa; array[36]=Tử; array[37]=Cửa; and this code with utf8 too. one thing doesn't work well when your cookie name content [] in it and you store the cookies is not in the array.

function getCookie(cname) {
            
            var ca = decodeURIComponent(document.cookie).split(';');
            
            
            if (cname.indexOf('[]') > 0) {
                var returnVAlue = [];
                var nameArray = cname.replace("[]", "");
                
                for(var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                   // console.log(c);
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
    
                    if (c.indexOf(nameArray) >= 0) {
                        var valueString = c.substr(nameArray.length, c.length);
                        
                        var valueStringSlit = valueString.split('=');
                        valueStringSlit[0] = valueStringSlit[0].substr(1,(valueStringSlit[0].length - 2));
                    //    console.log(valueStringSlit);
                        
                        returnVAlue.push(valueStringSlit);
                    }
                }
            } else {
                var returnVAlue = '';
                var name = cname + "=";
                
                for(var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                   // console.log(c);
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        returnVAlue = c.substr(name.length, c.length);
                    } 
                }
            }
    
            
            if (returnVAlue != ''){
                return returnVAlue;
            } 
            return "";
        }
        
       // console.log(decodeURIComponent(document.cookie));
        
       
        console.log(getCookie('array[]'));

Solution 40 - Javascript

var c = 'Yash' + '=' + 'Yash-777';
document.cookie = c; // Set the value: "Yash=Yash-777"
document.cookie      // Get the value:"Yash=Yash-777"

From Google GWT project Cookies.java class native code. I have prepared the following functions to perform actions on Cookie.

Function to get all the cookies list as JSON object.

var uriEncoding = false;
function loadCookiesList() {
	var json = new Object();
	if (typeof document === 'undefined') {
		return json;
	}

    var docCookie = document.cookie;
    if (docCookie && docCookie != '') {
      var crumbs = docCookie.split('; ');
      for (var i = crumbs.length - 1; i >= 0; --i) {
        var name, value;
        var eqIdx = crumbs[i].indexOf('=');
        if (eqIdx == -1) {
          name = crumbs[i];
          value = '';
        } else {
          name = crumbs[i].substring(0, eqIdx);
          value = crumbs[i].substring(eqIdx + 1);
        }
        if (uriEncoding) {
          try {
            name = decodeURIComponent(name);
          } catch (e) {
            // ignore error, keep undecoded name
          }
          try {
            value = decodeURIComponent(value);
          } catch (e) {
            // ignore error, keep undecoded value
          }
        }
        json[name] = value;
      }
    }
    return json;
 }

To set and Get a Cookie with a particular Name.

function getCookieValue(name) {
	var json = loadCookiesList();
	return json[name];
}

function setCookie(name, value, expires, domain, path, isSecure) {
	var c = name + '=' + value;
	if ( expires != null) {
	    if (typeof expires === 'number') {
	        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/now
            var timeInMs = Date.now();
            if (expires > timeInMs ) {
                console.log("Seting Cookie with provided expire time.");
                c += ';expires=' + (new Date(expires)).toGMTString();
            } else if (expires < timeInMs) {
                console.log("Seting Cookie with Old expire time, which is in Expired State.");
                timeInMs = new Date(timeInMs + 1000 * expires);
                c += ';expires=' + (new Date(timeInMs)).toGMTString();
            }
	    } else if (expires instanceof window.Date) {
	        c += ';expires=' + expires.toGMTString();
	    }
	}
    
	if (domain != null && typeof domain == 'string')
	  c += ';domain=' + domain;
	if (path != null && typeof path == 'string')
	  c += ';path=' + path;
	if (isSecure != null && typeof path == 'boolean')
	  c += ';secure';

	if (uriEncoding) {
		encodeURIComponent(String(name))
			.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
			.replace(/[\(\)]/g, escape);
		encodeURIComponent(String(value))
			.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);

	}
	document.cookie = c;
}

function removeCookie(name) {
	document.cookie = name + "=;expires=Fri, 02-Jan-1970 00:00:00 GMT"; 
}
function removeCookie(name, path) {
	document.cookie = name + "=;path=" + path + ";expires=Fri, 02-Jan-1970 00:00:00 GMT";
}

Checks whether a cookie name is valid: can't contain '=', ';', ',', or whitespace. Can't begin with $.

function isValidCookieName(name) {
	if (uriEncoding) {
	  // check not necessary
	  return true;
	} else if (name.includes("=") || name.includes(";") || name.includes(",") || name.startsWith("$") || spacesCheck(name) ) {
	  return false;
	} else {
	  return true;
	}
}
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
function spacesCheck(name) {
    var whitespace = new RegExp('.*\\s+.*');
    var result = whitespace.test(name);
    console.log("Name:isContainSpace = ", name, ":", result);
	return result;
}

Test steps to check the above functions:

setCookie("yash1", "Yash-777");
setCookie("yash2", "Yash-Date.now()", Date.now() + 1000 * 30);
setCookie("yash3", "Yash-Sec-Feature", 30);
setCookie("yash4", "Yash-Date", new Date('November 30, 2020 23:15:30'));

getCookieValue("yash4"); // Yash-Date
getCookieValue("unknownkey"); // undefined

var t1 = "Yash", t2 = "Y	ash", t3 = "Yash\n";
spacesCheck(t1); // False
spacesCheck(t2); // True
spacesCheck(t3); // True

Solution 41 - Javascript

const cookies = 'key1=chocolate; key2=iceCream; key3=cookies;';

// convert string into array with split
const arrCookies = cookies.split('; '); // [ 'key1=chocolate', 'key2=iceCream', 'key3=cookies' ]

// split key value by equal sign
const arrArrCookiesKeyValue = arrCookies.map(cookie => [cookie.split('=')]);  // [[['key1', 'chocolate']], ...']

// make an object with key value
const objectKeyValueCookies = {}; // { key1: 'chocolate', key2: 'iceCream', key3: 'cookies;' }
for (let arr of arrArrCookiesKeyValue) {
    objectKeyValueCookies[arr[0][0]] = arr[0][1];
}

// find the key in object
const findValueByKey = (key = null, objectCookies) => objectCookies[key];
console.log(findValueByKey('key2', objectKeyValueCookies)); // chocolate

Solution 42 - Javascript

This works perfect for me (assuming that the cookie name is unique):

function getCookie(name) {
    var cookies = document.cookie;
    var parts = cookies.split(name + "=");
    var cookieValue = '';
	if (parts.length == 2) {
        cookieValue = parts.pop().split(";").shift();
    }
	return cookieValue;
}

Solution 43 - Javascript

function GetCookieValue(name) {
    var found = document.cookie.split(';').filter(c => c.trim().split("=")[0] === name);
    return found.length > 0 ? found[0].split("=")[1] : null;
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1395001View Question on Stackoverflow
Solution 1 - JavascriptkirlichView Answer on Stackoverflow
Solution 2 - JavascriptJonathan CamenischView Answer on Stackoverflow
Solution 3 - JavascripttranteView Answer on Stackoverflow
Solution 4 - JavascriptJohn SView Answer on Stackoverflow
Solution 5 - JavascriptallenhwkimView Answer on Stackoverflow
Solution 6 - JavascriptMartin BraunView Answer on Stackoverflow
Solution 7 - JavascriptMohyaddin AlaoddinView Answer on Stackoverflow
Solution 8 - JavascriptLanil MarasingheView Answer on Stackoverflow
Solution 9 - JavascriptnkitkuView Answer on Stackoverflow
Solution 10 - JavascriptmfaladeView Answer on Stackoverflow
Solution 11 - JavascriptMarcView Answer on Stackoverflow
Solution 12 - Javascriptvarun sharmaView Answer on Stackoverflow
Solution 13 - Javascriptelad gasnerView Answer on Stackoverflow
Solution 14 - JavascriptalpavView Answer on Stackoverflow
Solution 15 - JavascriptDowngoatView Answer on Stackoverflow
Solution 16 - JavascriptLeo ToffView Answer on Stackoverflow
Solution 17 - JavascriptSampsonView Answer on Stackoverflow
Solution 18 - JavascriptLukas LiesisView Answer on Stackoverflow
Solution 19 - JavascriptSaddam HView Answer on Stackoverflow
Solution 20 - JavascriptcowbertView Answer on Stackoverflow
Solution 21 - JavascriptEugene BurtsevView Answer on Stackoverflow
Solution 22 - JavascriptBhale DinoView Answer on Stackoverflow
Solution 23 - JavascriptEwomazino UkahView Answer on Stackoverflow
Solution 24 - JavascriptSaravanan SelvamohanView Answer on Stackoverflow
Solution 25 - JavascriptatlefrenView Answer on Stackoverflow
Solution 26 - Javascriptsaydur rahmanView Answer on Stackoverflow
Solution 27 - JavascriptAmjed OmarView Answer on Stackoverflow
Solution 28 - Javascriptuser7090116View Answer on Stackoverflow
Solution 29 - Javascript79manView Answer on Stackoverflow
Solution 30 - JavascriptKalpit tandonView Answer on Stackoverflow
Solution 31 - JavascriptMohit SharmaView Answer on Stackoverflow
Solution 32 - JavascriptnhCoderView Answer on Stackoverflow
Solution 33 - JavascriptSuhail GuptaView Answer on Stackoverflow
Solution 34 - JavascriptKelkView Answer on Stackoverflow
Solution 35 - JavascriptJulian TellezView Answer on Stackoverflow
Solution 36 - JavascriptDayton BobbittView Answer on Stackoverflow
Solution 37 - JavascriptErenor PazView Answer on Stackoverflow
Solution 38 - Javascriptvidur punjView Answer on Stackoverflow
Solution 39 - JavascriptVõ MinhView Answer on Stackoverflow
Solution 40 - JavascriptYashView Answer on Stackoverflow
Solution 41 - JavascriptHectorView Answer on Stackoverflow
Solution 42 - JavascriptShessukyView Answer on Stackoverflow
Solution 43 - JavascriptCoremanView Answer on Stackoverflow