Related
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]);
}
}
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.
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.
The methods in some of the other answers that use a regular expression do not cover all cases, particularly:
When the cookie is the last cookie. In this case there will not be a semicolon after the cookie value.
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".
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:
This function assumes cookie names are case sensitive.
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.
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:
(?:xxxx) - forms a non-matching group.
^ - matches the start of the string.
| - separates alternative patterns for the group.
;\\s* - matches one semi-colon followed by zero or more whitespace characters.
= - matches one equal sign.
(xxxx) - forms a matching group.
[^;]* - 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.
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');
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.
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.
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.
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'
A simple way :)
const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")
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)))
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')
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.
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.
function getCookie(name) {
var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
if (pair)
return pair.split('=')[1]
}
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();
}
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.
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;
}
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.
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] : "";
}
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');
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);
}
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
set by javascript
document.cookie = 'cookiename=tesing';
get by jquery with the jquery-cookie plugin
var value = $.cookie("cookiename");
alert(value);
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
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
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;
}
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];
};
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 :-(');
}
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);
});
}
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 "";
}
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]);
}
}
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.
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.
The methods in some of the other answers that use a regular expression do not cover all cases, particularly:
When the cookie is the last cookie. In this case there will not be a semicolon after the cookie value.
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".
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:
This function assumes cookie names are case sensitive.
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.
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:
(?:xxxx) - forms a non-matching group.
^ - matches the start of the string.
| - separates alternative patterns for the group.
;\\s* - matches one semi-colon followed by zero or more whitespace characters.
= - matches one equal sign.
(xxxx) - forms a matching group.
[^;]* - 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.
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');
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.
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.
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.
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'
A simple way :)
const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")
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)))
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')
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.
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.
function getCookie(name) {
var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
if (pair)
return pair.split('=')[1]
}
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();
}
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.
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;
}
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.
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] : "";
}
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');
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);
}
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
set by javascript
document.cookie = 'cookiename=tesing';
get by jquery with the jquery-cookie plugin
var value = $.cookie("cookiename");
alert(value);
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
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
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;
}
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];
};
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 :-(');
}
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);
});
}
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 "";
}
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]);
}
}
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.
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.
The methods in some of the other answers that use a regular expression do not cover all cases, particularly:
When the cookie is the last cookie. In this case there will not be a semicolon after the cookie value.
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".
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:
This function assumes cookie names are case sensitive.
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.
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:
(?:xxxx) - forms a non-matching group.
^ - matches the start of the string.
| - separates alternative patterns for the group.
;\\s* - matches one semi-colon followed by zero or more whitespace characters.
= - matches one equal sign.
(xxxx) - forms a matching group.
[^;]* - 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.
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');
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.
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.
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.
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'
A simple way :)
const cookieObj = new URLSearchParams(document.cookie.replaceAll("&", "%26").replaceAll("; ","&"))
cookieObj.get("your-cookie-name")
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)))
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')
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.
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.
function getCookie(name) {
var pair = document.cookie.split('; ').find(x => x.startsWith(name+'='));
if (pair)
return pair.split('=')[1]
}
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();
}
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.
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;
}
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.
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] : "";
}
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');
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);
}
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
set by javascript
document.cookie = 'cookiename=tesing';
get by jquery with the jquery-cookie plugin
var value = $.cookie("cookiename");
alert(value);
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
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
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;
}
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];
};
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 :-(');
}
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);
});
}
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 "";
}
I am saving a URL in a cookie using Angular
$cookies.put("targetURL": "http://partners.api.xyz.net/apiservices/deeplink/v2?_cje=TmvlUQgTj%2fbxOQ%2bkXy5haJR9JWcHT9aaSjEP%2fEbwSq4uZqOYt%2fRV9FYsU1PT80PD&url=http%3a%2f%2fwww.apideeplink.com%26cabin_class%3deconomy%26facilitated%3dfalse%26ticket_price%3d72.82%26is_npt%3dfalse%26is_multipart%3dfalse%26client_id%3d2017-02-22T10%3a02%3a07")
However, I have to retrieve this cookie with plain javascript. When I try to get it, the string is transformed into
"http%3A%2F%2Fpartners.api.xyz.net%2Fapiservices%2Fdeeplink%2Fv2%3F_cje%3DTmvlUQgTj%252fbxOQ%252bkXy5haJR9JWcHT9aaSjEP%252fEbwSq4uZqOYt%252fRV9FYsU1PT80PD%26url%3Dhttp%253a%252f%252fwww.apideeplink.com%2526cabin_class%253deconomy%2526facilitated%253dfalse%2…e%2526is_multipart%253dfalse%2526client_id%253d2017-02-22T10%253a02%253a07" and not clickable anymore.
To retrieve the cookie I am using the function:
function getCookie(name) {
var value = "; " + document.cookie;
var parts = value.split("; " + name + "=");
if (parts.length == 2) return parts.pop().split(";").shift();
}
Why is the string changed like this and what can I do to solve this?
You need to decode the URI with decodeURIComponent()
old = "http%3A%2F%2F";
new = decodeURIComponent( old );
#new => http://
I've found several posts alluding to the location.href method. But I can't find anything about how to use the variable on the next page that's opened.
I have a function with a single line of code in an external js file:
function nextPage()
{location.href='page2.html?foo=' + src;}
It's activated by a button in the html file. How do I use this on the next page that's opened? I'm assuming this makes 'foo' available. ('src' is an integer stored as a global variable in the external js file. It's just a number between 1 and 5).
On the next page you can get the value using:
http://page2.html?foo=
location.search
> ?foo=
location.search.substring(1)
> foo=
In Script Tag You Put
var array=location.search;
var data = array.split("foo=");
var divid=data[1];//It has your foo value
if you are using javascript then try this code to get querystring value
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var value = getParameterByName('foo');