CODEWITHSUNDEEP
javascriptcookies
imieliei
imieliei

Reputation: 19

Look for partial name of cookie using Javascript

On my website I use a cookie to show or hide certain content. Depending on how users log in will determine what content is visible to them. i.e. If I log in with Facebook, my site looks for a cookie called "fbsr_3324". My problem is that the second part of the cookie name changes for every user (fbsr_2889 fbsr_9902 etc). I therefore want to know if someone can help and suggest how I can check for only the first part of the cookie name (i.e. only look for the existance of cookies starting with fbsr_

Here is the current current Javascript I use:

function checkCookie() {
    contentDiv=document.getElementById("cookieFb");
    if (document.cookie.indexOf("fbsr_")!=-1) {
        contentDiv.style.display="none";
    }
    else {
        contentDiv.style.display="block";
    }
}

Upvotes: 0

Views: 2354

Answers (2)

bastos.sergio
bastos.sergio

Reputation: 6764

I would do this. First break all cookies into an associative array

Edit

Function scraped from here

function get_cookies_array() {

    var cookies = { };

    if (document.cookie && document.cookie != '') {
        var split = document.cookie.split(';');
        for (var i = 0; i < split.length; i++) {
            var name_value = split[i].split("=");
            name_value[0] = name_value[0].replace(/^ /, '');
            cookies[decodeURIComponent(name_value[0])] = decodeURIComponent(name_value[1]);
        }
    }

    return cookies;
}

then in your checkCookie function loop through all cookie names and see if any starts with fbsr_

function checkCookie() {
    var contentDiv=document.getElementById("cookieFb");
    var cookies = get_cookies_array();

    contentDiv.style.display="none";
    for(var name in cookies) {
        if (name.indexOf("fbsr_")==0) {
            contentDiv.style.display="block";
        }
    }
}

Upvotes: 0

Elias Van Ootegem
Elias Van Ootegem

Reputation: 76395

The code you're currently using would perform as if I were logged in using facebook, if I had a cookie set containing the value 'fbsr_haha, gotcha'
Perhaps this is a job for regex:

/^|;\s*fbsr_[0-9]{4}\=[^;]+;/.test(document.cookie);

Should do the trick.
Expression explanation:

  • ^|;: Either start of the string, or a semi-colon
  • \s*: followed by zero or more spacces
  • fbsr_[0-9]{4}: matches fsbr_ and any sequence of 4 numbers
  • \=: you could just write =, but sometimes you need to escape = (lookarounds), so best escape it once too often than not enough
  • [^;]+ anything but a semi-colon at least once or more
  • ;: a literal semi-colon

Where to use this expression:

function checkCookie()
{
    contentDiv=document.getElementById("cookieFb");
    if (/^|;\s*fbsr_[0-9]{4}\=[^;]+;/.test(document.cookie))
    {//facebooker!
        contentDiv.style.display="none";
        return;//return here, so you can leve the else out
    }
    contentDiv.style.display="block";
}

Well, that should do it.
However, I can't help myself, so if ever you get more familiar with JS, and feel like optimizing some of your scripts, consider this:

var checkCookie = (function(expr)
{
    var contentDiv = document.getElementById('cookieFb');
    return function()
    {
        contentDiv.style.display="block";
        if (expr.test(document.cookie))
        {
            contentDiv.style.display="none";
        }
    };
}(/^|;\s*fbsr_[0-9]{4}\=[^;]+;/));

This is an optimized version of the exact same code you have. ATM, your code will query the dom for an element with the ID cookieFb every time it is called, and it'll create an instance of RegExp, too. By using a closure, you can query the DOM once, and create the instance of RegExp once, and re-use it for each call.
It's a bit more efficient, and micro-optimization in this case, but I couldn't help myself ;)

Upvotes: 2

Related Questions