Basics of Javascript Cookies

Posted By: Kanika Gupta Published: 14, Jan 2024

Basics of Javascript Cookies


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

  • Session cookies – they exist only to record a user session and gets deleted immediately after the session expires.
  • Persistent cookies – they remain persistently in the user’s browser abiding by their expiration date.
  • Authentication cookies – they are generated when a user logs in to any account via the browser and helps in delivering the correct information to the users.
  • Tracking cookies – they are usually generated to keep a record of user activities on the browser and are generated by tracking services.
  • Zombie cookies – they get regenerated as and when they get deleted. They use a backup version of themselves to reappear within a browser.
We have created three functions to implement a cookie.
  • setCookie() – to create a cookie with a specified expiration date using the max-age component/attribute.
  • getCookie() – to read the value of the cookies. To get a single cookie from this list, use the split() method to divide it into individual name = value pairs.
  • checkCookie() – to check whether colorName is set or not using the getCookie() function.

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. 

Categories


Recent Blog