Basics of Javascript Cookies

Posted By: Kanika Gupta Published: 14, Jan 2024

In layman terms, cookies are text files that contain small amounts of data, such as a username and password, and are used to track and remember information about the user.

They aid in the identification of a specific user's website activity, allow a website to "remember" user actions or preferences, allowing the website to tailor the user's experience as well as help in keeping a track of which websites users visit. 

Types of cookies

Reading and Setting a Cookie

CODE

<script>

checkCookie();

function setCookie(color_name, css, daysToLive) 
{
    var cookie = color_name + "=" + encodeURIComponent(css);
    if(typeof daysToLive === "number") 
    {
        cookie += "; max-age=" + (daysToLive*24*60*60);
        document.cookie = cookie;
    }
}

function checkCookie() 
{
    var colorName = getCookie("colorName");
    if(colorName == null) 
    {               
        setCookie("colorName", "{{css}}", 1);              
        document.head.innerHTML += '<link href="view/stylesheet/{{ css }}" type="text/css" rel="stylesheet"/>';
    }
    else
    {               
        document.head.innerHTML += '<link href="view/stylesheet/'+ colorName +'" type="text/css" rel="stylesheet"/>';
    }
}

function getCookie(color_name)
{
    var cookieArr = document.cookie.split(";");
    for(var i = 0;i < cookieArr.length; i++) 
    {
        var cookiePair = cookieArr[i].split("=");          
        if(color_name == cookiePair[0].trim()) 
        {
            return decodeURIComponent(cookiePair[1]);
        }
    }
 return null;
}
</script>

Cookies are required for a website to function properly and can be helpful at times to keep a track of your business’ growth or audience requirements. They enable us to understand users and their behaviour patterns, allowing them to interpret the users' needs, thoughts, or experiences.