CODEWITHSUNDEEP
javascriptcookies
user1395001
user1395001

Reputation:

Get cookie by name

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]);
    }
 }

Upvotes: 608

Views: 1356836

Answers (30)

KyleMit
KyleMit

Reputation: 30387

There's an Experimental API Called CookieStore that offers convient, safe, asynchronous access to Cookies. It's available on chromium based browsers, but it's easily polyfillable elsewhere using the cookie-store package.

// import polyfill and declare types
import 'cookie-store';
 
// set a cookie
await cookieStore.set('forgive', 'me');

// get a cookie
const foo = await cookieStore.get('forgive');
console.log(foo); // { name: 'forgive', value: 'me' }

Further Reading

Upvotes: 2

allenhwkim
allenhwkim

Reputation: 27748

4 years later, ES6 way simpler version.

function getCookie(name) {
  let cookie = {};
  document.cookie.split(';').forEach(function(el) {
    let split = el.split('=');
    cookie[split[0].trim()] = split.slice(1).join("=");
  })
  return cookie[name];
}

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

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

Upvotes: 54

Jonathan Camenisch
Jonathan Camenisch

Reputation: 3722

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 getCookieValue(name) 
    {
      const regex = new RegExp(`(^| )${name}=([^;]+)`)
      const match = document.cookie.match(regex)
      if (match) {
        return match[2]
      }
   }

Improved thanks to Scott Jungwirth in the comments.

Upvotes: 263

Bald
Bald

Reputation: 2316

Object.fromEntries(
    document.cookie.split(';').map(item => {
      return item.trim().split('=', 2);
    }),
  );

Upvotes: 1

Dmitry Vasilev
Dmitry Vasilev

Reputation: 6538

Pure functional way


// convert cookies to object

const cookies = Object.assign(
    {}, 
    ...document.cookie.split(';')
        .filter(s => s)
        .map(cookie => cookie.split('='))
        .map(([key, value]) => ({ 
            [key.trim()]: (value+'').trim() 
        }))
);

// usage

console.log(cookies.shared);
console.log(cookies.obligations);

One liner

const cookies = Object.assign({}, ...document.cookie.split(';').filter(s => s).map(cookie => cookie.split('=')).map(([key, value]) => ({ [key.trim()]: (value+'').trim() })));

// usage

console.log(cookies.shared);
console.log(cookies.obligations);

As function with name argument

const getCookie = name => Object.assign({}, ...document.cookie.split(';').filter(s => s).map(cookie => cookie.split('=')).map(([key, value]) => ({ [key.trim()]: (value+'').trim() })))[name];

// usage

console.log(getCookie('shred'));
console.log(getCookie('obligations'));

One liner for single value

const shared = Object.assign({}, ...document.cookie.split(';').filter(s => s).map(cookie => cookie.split('=')).map(([key, value]) => ({ [key.trim()]: (value+'').trim() }))).shared;

// usage

console.log(shared);

UPD: fixed trim() error for empty cookie values

UPD2: fixed "" key for empty cookies

Upvotes: -1

Page COW
Page COW

Reputation: 765

I had an issue where sometimes two cookies with the same name would be saved to the browser. I couldn't figure out how to stop this from happening. But I learned how you can get the most recent cookie that was saved instead of the first cookie saved.

Here's the code:

    const getCookie = (name) => {
        const match = document.cookie.split(';').map(el => { let [key,value] = el.split('='); return { [key.trim()]: value }})
        const filteredMatch = match.filter(e => Object.keys(e)[0] === name)

        let matchLength = filteredMatch.length

        return filteredMatch[matchLength - 1][name]
    }

Upvotes: 0

Hector Moreno-Bravo
Hector Moreno-Bravo

Reputation: 55

You could make use of array methods to filter data and save coding lines:

const extractFrom = (name) => {
        let data = document.cookie.split(' ').find(e => e.startsWith(name));
        if(data) {
            return data.substring((data.indexOf('=') + 1), (data.length -1));
        } else {
            return null;
        }
    }

Upvotes: -1

elad gasner
elad gasner

Reputation: 745

A simple way :)

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

Upvotes: 24

nimblebit
nimblebit

Reputation: 559

I wrote this to work with Internet Explorer 11 and modern browsers like Chromium Edge and Firefox.

This gets a cookie value where the HttpOnly attribute is false.

    function getCookieValue(keyName) {

        let returnValue = undefined;

        if (keyName && document.cookie) {

            let cookieArray = decodeURIComponent(document.cookie).split('; ');
            for (var i = 0; i < cookieArray.length; i++) {

                if (cookieArray[i]) {
                    let key = cookieArray[i].split('=')[0];
                    if (key && key === keyName) {
                        let value = cookieArray[i].split('=')[1];
                        returnValue = value;
                        break;
                    }
                }

            }

        }

        return returnValue;

    }

Upvotes: -1

nkitku
nkitku

Reputation: 5788

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)))

Upvotes: 41

nhCoder
nhCoder

Reputation: 587

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 "";
}

Upvotes: 1

Mohit Sharma
Mohit Sharma

Reputation: 687

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')

Upvotes: 2

Sentary
Sentary

Reputation: 2026

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;
}

Upvotes: 0

Martin Braun
Martin Braun

Reputation: 12649

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.

Upvotes: 66

Hector
Hector

Reputation: 632

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

Upvotes: 0

Saravanan Selvamohan
Saravanan Selvamohan

Reputation: 344

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

Upvotes: 3

user7090116
user7090116

Reputation:

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 :-(');
}

Upvotes: 2

varun sharma
varun sharma

Reputation: 1057

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')

Upvotes: 14

John S
John S

Reputation: 21492

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.

Upvotes: 82

Kalpit tandon
Kalpit tandon

Reputation: 129

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 "";
}

Upvotes: 1

kirlich
kirlich

Reputation: 8498

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.

Upvotes: 745

Mohyaddin Alaoddin
Mohyaddin Alaoddin

Reputation: 2545

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.

Upvotes: 25

Amjed Omar
Amjed Omar

Reputation: 1014

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];
};

Upvotes: 3

Yash
Yash

Reputation: 9588

Document.cookie The Document property cookie lets you read and write cookies associated with the document. It serves as a getter and setter for the actual values of the cookies. 

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

Upvotes: 0

Coreman
Coreman

Reputation: 1

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

Upvotes: -2

V&#245; Minh
V&#245; Minh

Reputation: 155

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[]'));

Upvotes: 0

vidur punj
vidur punj

Reputation: 5901

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);

Upvotes: 0

Lanil Marasinghe
Lanil Marasinghe

Reputation: 2915

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'

Upvotes: 25

cowbert
cowbert

Reputation: 3463

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');

Upvotes: 7

Erenor Paz
Erenor Paz

Reputation: 3181

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

    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".

Upvotes: 1

Related Questions