JavaScript Cookies

A cookie is a small file that the server/website sends on the user’s computer and is stored in the browser. Modern day websites hugely use cookies in order to remember the client and related information. When the page loads, the servevr checks for any stored cookies. This is the reason you need not to login again and again on many websites.

Creating Cookie

Cookies are used as a key value pairs, each key holds a value assigned to them. With javascript, you can create, read, write and delete cookies with document.cookie property.

document.cookie = "name=some name";

Multiple values can be stored in same cookie with a semi colon, also expiry time can be added.

document.cookie = "fname = first;lname = last;expires = Wed, 20 Sept 2017 10:00:00 UTC"

Deleting Cookie

Cookies are deleted automatically when they expire. But you can intentionally delete a cookie by overwriting it. Simply leave values empty for every key value pair that you want to delete.

document.cookie = "fname = ;lname = ;expires = Thu, 01 Jan 1970 00:00:00 UTC"

Cookie Example

Now we will try a small app which uses cookies to store and verify information.

Making the HTML

<input type="text" class="form-control" id='data'>
<button class="btn center-block btn-primary" id='submit'>Go</button>

The Javascript

Attaching eventlistener to the button and getting the value from input box.

document.getElementById('submit').addEventListener("click", function(){
    var name = document.getElementById("data").value;
    setCookie(name);
});

Setting the Cookie

function setCookie(name) {
    document.cookie = "name =" + name;
};

Get the Cookie

You can get the cookie values using document.cookie as shown below

window.onload = function(event){ 
	var name = "name =";
	var decodedCookie = decodeURIComponent(document.cookie);
	data = decodedCookie.split('=')[1]
	if(data!='undefined')
		document.write(data);
}

Complete Code for Cookie

Below is the complete code how to use cookie using HTML and JavaScript

<html>
	<head>
		<meta charset='utf-8'>
		<title>Cookies</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<style>
			.well{
				font-weight: bold
			}
		</style>
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-10 col-md-offset-1">
				<h2>Cookies App</h2>
				<input type="text" class="form-control" id='data'>
				<br>
				<button class="btn center-block btn-primary" id='submit'>Go</button>
				</div>
			</div>
		</div>


		<script>	
			window.onload = function(event){ 
				var name = "name =";
			    var decodedCookie = decodeURIComponent(document.cookie);
			    data = decodedCookie.split('=')[1]
				if(data!='undefined')
					document.write(data);
			}

			function setCookie(name) {
			    document.cookie = "name =" + name;
			};

			document.getElementById('submit').addEventListener("click", function(){
			    var name = document.getElementById("data").value;
			    setCookie(name);
			}); 
		</script>
	</body>
</html>
Translate »