Javascript create, read, and delete cookies

Create a cookie. The window object has the document as a child object, and the document object has the cookie properties. You just have to set some value to tthe widown.document.cookie to create a cookie.

/**
 * Set a cookie
 * @param {String} cname, cookie name
 * @param {String} cvalue, cookie value
 * @param {Int} exdays, number of days before the cookie expires 
 */
function setCookie(cname,cvalue,exdays) {
    var d = new Date(); //Create an date object
    d.setTime(d.getTime() + (exdays*1000*60*60*24)); //Set the time to exdays from the current date in milliseconds. 1000 milliseonds = 1 second
    var expires = "expires=" + d.toGMTString(); //Compose the expirartion date
    window.document.cookie = cname+"="+cvalue+"; "+expires;//Set the cookie with value and the expiration date
}

Read a cookie. As long as you know the cookie name, you can loop through window.document.cookies to get the cookie value.

/**
 * Get a cookie
 * @param {String} cname, cookie name
 * @return {String} String, cookie value 
 */
function getCookie(cname) {
    var name = cname + "="; //Create the cookie name variable with cookie name concatenate with = sign
    var cArr = window.document.cookie.split(';'); //Create cookie array by split the cookie by ';'
    
	//Loop through the cookies and return the cooki value if it find the cookie name
	for(var i=0; i<cArr.length; i++) {
        var c = cArr[i].trim();
		//If the name is the cookie string at position 0, we found the cookie and return the cookie value
        if (c.indexOf(name) == 0) 
			return c.substring(name.length, c.length);
    }
	
	//If we get to this point, that means the cookie wasn't find in the look, we return an empty string.
    return "";
}

Delete a cookie. To delete a cookie works similar to set or create a cookie. The only difference is that you set the expiration date of the cookie in the past instead of future.

/**
 * Delete a cookie
 * @param {String} cname, cookie name
 */
function deleteCookie(cname) {
	var d = new Date(); //Create an date object
    d.setTime(d.getTime() - (1000*60*60*24)); //Set the time to the past. 1000 milliseonds = 1 second
    var expires = "expires=" + d.toGMTString(); //Compose the expirartion date
    window.document.cookie = cname+"="+"; "+expires;//Set the cookie with name and the expiration date

}

These are some use cases of the above 3 functions for create, read and delete cookies.

/**
 * Check if there is a vistorname cookie.
 * If yes, display welcome message.
 * If No, prompt the vistor for a name, and set the vistorname cookie.
 */
function checkCookie() {
	//deleteCookie('vistorname');
    var vistor=getCookie("vistorname");
    if (vistor != "") {
        var welcome_msg = window.document.getElementById('welcome-msg');
		welcome_msg.innerHTML="Welcome "+vistor;
    } else {
       vistor = prompt("What is your name?","");
       if (vistor != "" && vistor != null) {
           setCookie("vistorname", vistor, 30);
       }
    }
}

/**
 * Set a cooke and reload the page when the create cookie button is clicked
 */
function setACookie(){
	var cname = window.document.getElementById('cname').value; //Get the cookie name from the cname input element
	var cvalue = window.document.getElementById('cvalue').value;//Get the cookie value from the cvalue input element
	var exdays = window.document.getElementById('exdays').value;//Get the expiration days from the exdays input element
	
	setCookie(cname, cvalue, exdays);//Call the setCookie to create the cookie
	window.location.reload();//Reload the page
}

/**
 * Delete a cookie and reload the page when the delete cookie button is clicked
 */
function deleteACookie(){
	var cname = window.document.getElementById('cname').value;//Get the cookie name from the cname input element
	deleteCookie(cname);//Call the deleteCookie to delete the cookie
	window.location.reload();//Reload the page
}

/**
 * Display all the cookies
 */
function disPlayAllCookies()
{
	var cookieDiv = window.document.getElementById('cookies');//Get the cookies div element
	var cArr = window.document.cookie.split(';'); //Create cookie array by split the cookie by ';'
	
	//Loop through all the cookies and display them with cookie name = cookie value
	for(var i=0; i<cArr.length; i++)
	{
		var pElm = window.document.createElement("p");//Create a p element to hold the cookie name and cookie value
    	pElm.innerHTML=cArr[i].trim();//Put the cookie name and cookie value in the p elment
    	cookieDiv.appendChild(pElm);//Append the p to the cookies div element
	}
}

All together. The index.html

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="jscookie.js"></script>
		<style>
			label
			{
				display:inline-block;
				width:100px;
				text-align:right;
			}
		</style>
	</head>
	<body onload="checkCookie();disPlayAllCookies();">
	
		<div id='welcome-msg'></div>
		<div name="cookieForm" id="cookieForm">
			<label>Cookie Name</label><input id="cname" type="text"/><br>
			<label>Cookie Value</label><input id="cvalue" type="text"/><br>
			<label>Expiraton days</label><input id="exdays"type="number" min="1"/><br>
			<button id="createBtn" onClick="setACookie();">Create Cookie</button>
			<button id="deleteBtn" onClick="deleteACookie();">Delete Cookie</button>
		</div>
		<div id="cookies">
			<h2>Cookies</h2>
		</div>
		
	</body>
</html>

The jscookie.js

function setCookie(cname,cvalue,exdays) {
    var d = new Date(); 
    d.setTime(d.getTime() + (exdays*1000*60*60*24)); 
    var expires = "expires=" + d.toGMTString(); 
    window.document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname) {
    var name = cname + "="; 
    var cArr = window.document.cookie.split(';'); 
	for(var i=0; i<cArr.length; i++) {
        var c = cArr[i].trim();
        if (c.indexOf(name) == 0) 
			return c.substring(name.length, c.length);
    }
    return "";
}

function deleteCookie(cname) {
    var d = new Date(); 
    d.setTime(d.getTime() - (1000*60*60*24)); 
    var expires = "expires=" + d.toGMTString(); 
    window.document.cookie = cname+"="+"; "+expires;

}

function checkCookie() {
    var vistor=getCookie("vistorname");
    if (vistor != "") {
        var welcome_msg = window.document.getElementById('welcome-msg');
		welcome_msg.innerHTML="Welcome "+vistor;
    } else {
       vistor = prompt("What is your name?","");
       if (vistor != "" && vistor != null) {
           setCookie("vistorname", vistor, 30);
       }
    }
}
function setACookie(){
	var cname = window.document.getElementById('cname').value; 
	var cvalue = window.document.getElementById('cvalue').value;
	var exdays = window.document.getElementById('exdays').value;
	
	setCookie(cname, cvalue, exdays);
	window.location.reload();
}

function deleteACookie(){
	var cname = window.document.getElementById('cname').value;
	deleteCookie(cname);
	window.location.reload();
}

function disPlayAllCookies()
{
	var cookieDiv = window.document.getElementById('cookies');
	var cArr = window.document.cookie.split(';'); 
	for(var i=0; i<cArr.length; i++)
	{
	var pElm = window.document.createElement("p");
    	pElm.innerHTML=cArr[i].trim();
    	cookieDiv.appendChild(pElm);
	}
}

demo