Javascript getCookie functions

Question

I found two functions to get cookie data with Javascript, one on w3schools.com and one on quirksmode.org
I would like to know which one I should use?

For example I believe I read somewhere that there was a problem with some browsers splitting the ; semicolon?

w3schools:

function getCookie(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexOf(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexOf(";", c_start);
            if (c_end == -1) c_end = document.cookie.length;
            return unescape(document.cookie.substring(c_start, c_end));
        }
    }
    return "";
}

quirksmode:

function readCokie(name) {
    var nameEQ = name + "=";
    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(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

They both go looking for ; characters to split up cookies, which as far as I know is always correct. — VoteyDisciple
– VoteyDisciple, Commented Oct 23, 2010 at 12:09
The getCookie function is wrong, think at what happens if you get a cookies named ART= and you have a cookies named SMART= — Marco Demaio
– Marco Demaio, Commented Mar 22, 2011 at 19:41
w3schools has since changed their getCookie function (see w3schools.com/js/js_cookies.asp), probably works better now. — pauloya
– pauloya, Commented Apr 26, 2013 at 11:56
They are using the same function now - just with different names and whitespaces. — Kevin Sandow
– Kevin Sandow, Commented Aug 19, 2014 at 15:34

Community · Accepted Answer · 2021-10-07 05:46:31Z

93

The function from W3CSchool is wrong. It fails if there are multiple cookies that have the same suffix like:

ffoo=bar; foo=baz

When you search for foo it will return the value of ffoo instead of foo.

Now here is what I would do: First of all, you need get to know the syntax of how cookies are transported. Netscape’s original specification (there are only copies available like this one at haxx.se) uses semicolons to separate multiple cookies while each name/value pair has the following syntax:

NAME=VALUE
This string is a sequence of characters excluding semi-colon, comma and white space. If there is a need to place such data in the name or value, some encoding method such as URL style %XX encoding is recommended, though no encoding is defined or required.

So splitting document.cookie string at semi-colons or commas is a viable option.

Besides that, RFC 2109 does also specify that cookies are separated by either semi-colons or commas:

cookie          =       "Cookie:" cookie-version
                        1*((";" | ",") cookie-value)
cookie-value    =       NAME "=" VALUE [";" path] [";" domain]
cookie-version  =       "$Version" "=" value
NAME            =       attr
VALUE           =       value
path            =       "$Path" "=" value
domain          =       "$Domain" "=" value

Although both are allowed, commas are preferred as they are the default separator of list items in HTTP.

Note: For backward compatibility, the separator in the Cookie header is semi-colon (;) everywhere. A server should also accept comma (,) as the separator between cookie-values for future compatibility.

Furthermore, the name/value pair has some further restrictions as the VALUE can also be a quoted string as specified in RFC 2616:

attr        =     token
value       =     token | quoted-string

So these two cookie versions need to be treated separately:

if (typeof String.prototype.trimLeft !== "function") {
    String.prototype.trimLeft = function() {
        return this.replace(/^\s+/, "");
    };
}
if (typeof String.prototype.trimRight !== "function") {
    String.prototype.trimRight = function() {
        return this.replace(/\s+$/, "");
    };
}
if (typeof Array.prototype.map !== "function") {
    Array.prototype.map = function(callback, thisArg) {
        for (var i=0, n=this.length, a=[]; i<n; i++) {
            if (i in this) a[i] = callback.call(thisArg, this[i]);
        }
        return a;
    };
}
function getCookies() {
    var c = document.cookie, v = 0, cookies = {};
    if (document.cookie.match(/^\s*\$Version=(?:"1"|1);\s*(.*)/)) {
        c = RegExp.$1;
        v = 1;
    }
    if (v === 0) {
        c.split(/[,;]/).map(function(cookie) {
            var parts = cookie.split(/=/, 2),
                name = decodeURIComponent(parts[0].trimLeft()),
                value = parts.length > 1 ? decodeURIComponent(parts[1].trimRight()) : null;
            cookies[name] = value;
        });
    } else {
        c.match(/(?:^|\s+)([!#$%&'*+\-.0-9A-Z^`a-z|~]+)=([!#$%&'*+\-.0-9A-Z^`a-z|~]*|"(?:[\x20-\x7E\x80\xFF]|\\[\x00-\x7F])*")(?=\s*[,;]|$)/g).map(function($0, $1) {
            var name = $0,
                value = $1.charAt(0) === '"'
                          ? $1.substr(1, -1).replace(/\\(.)/g, "$1")
                          : $1;
            cookies[name] = value;
        });
    }
    return cookies;
}
function getCookie(name) {
    return getCookies()[name];
}

edited Oct 7, 2021 at 5:46

CommunityBot

11 silver badge

answered Oct 23, 2010 at 12:44

Gumbo

657k112 gold badges792 silver badges852 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Tim Down Over a year ago

I'd move trimRight and trimLeft out of the getCookie function: you only need to set them once.

Marco Demaio Over a year ago

what's that part of the code where you check the $Version? It's the 1st time I see it in getCookie like functions. Is it still useful?

Gumbo Over a year ago

@Marco Demaio: The $Version=1 attribute is part of the RFC specifications to identify the cookies of those specifications and might get important when browsers start to implement them (although I’m not sure how the document.cookie value will reflect that).

Anthony Martin Over a year ago

This answer is a prime example of overengineering. Why include all of that code, when the problem can easily be solved by creating a cookie name that is very likely to be unique. eg. NAMESPACE_KEY

user456584 Over a year ago

This answer appears to choke on anything with '=' as part of the cookie's value. Compare the answer's getCookies() function with document.cookie.split('; ')

|

Craig Smedley · Accepted Answer · 2014-12-15 02:00:21Z

13

Yes, the W3Schools solution is incorrect.

For those that would like it, here is a simpler solution that works. It just prepends a space so the single call to indexOf() only returns the correct cookie.

function getCookie(c_name) {
    var c_value = " " + document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1) {
        c_value = null;
    }
    else {
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1) {
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

edited Dec 15, 2014 at 2:00

answered Apr 4, 2014 at 3:14

Craig Smedley

2,6581 gold badge17 silver badges10 bronze badges

1 Comment

BornToCode Over a year ago

Nowadays decodeURIComponent should be preferred over unescape. See here for details.

VoteyDisciple · Accepted Answer · 2010-10-23 12:13:32Z

6

This, from w3schools, is incorrect in that it may lead to getting the wrong cookie:

c_start = document.cookie.indexOf(c_name + "=");

If you go looking for a cookie named foo (which we'll suppose is an existing cookie) then somewhere in document.cookie will be the string foo=bar.

However, there's no guarantee there won't also be the string xfoo=something. Notice that this still contains the substring foo= so the w3schools code will find it. And if the xfoo cookie happens to be listed first, you'll get back the something value (incorrectly!) instead of the expected bar.

Given the choice between two pieces of code, never go with the one that's fundamentally broken.

edited Oct 23, 2010 at 12:13

answered Oct 23, 2010 at 12:08

VoteyDisciple

37.9k5 gold badges100 silver badges100 bronze badges

Comments

B Factor · Accepted Answer · 2017-12-31 19:06:07Z

2

All of the code shown above is BROKEN. The two common problems are (1) the getcookie function may return the wrong value if one cookie name is a proper suffix of another cookie name; and (2) the setcookie function does not protect the cookie value, which means that if the cookie value includes (for example) a ";" then all the cookies are corrupted and cannot be parsed.

TL;DR Use this well-written library instead: https://github.com/js-cookie/js-cookie

answered Dec 31, 2017 at 19:06

B Factor

362 bronze badges

1 Comment

dlauzon Over a year ago

Tried the accepted answer for double-quoted cookie values containing equal signs, and it didn't work, but js-cookie did the job.

Vincent Robert · Accepted Answer · 2019-04-06 10:33:55Z

1

Here is my version, it covers the edge case of quoted values.

function getCookies() {
  const REGEXP = /([\w\.]+)\s*=\s*(?:"((?:\\"|[^"])*)"|(.*?))\s*(?:[;,]|$)/g;
  let cookies = {};
  let match;
  while( (match = REGEXP.exec(document.cookie)) !== null ) {
    let value = match[2] || match[3];
    cookies[match[1]] = decodeURIComponent(value);
  }
  return cookies;
}

edited Apr 6, 2019 at 10:33

answered Apr 6, 2019 at 10:25

Vincent Robert

36.2k15 gold badges84 silver badges122 bronze badges

Collectives™ on Stack Overflow

Javascript getCookie functions

5 Answers 5

10 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related