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

Solution 1:

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:

functioncheckCookie()
{
    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');
    returnfunction()
    {
        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 ;)

Solution 2:

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

Edit

Function scraped from here

functionget_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_

functioncheckCookie() {
    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";
        }
    }
}