Javascript Cookies Vs Local Storage

Find out between javascript cookies and local storage which one you should use for your web app.
Get the code:
<!DOCTYPE html>
<html>
<head>
	 
	<title> Storage - Code With Mark </title>

	<meta name="viewport" content="width=device-width, initial-scale=1">


	<meta name="author" content="Code With Mark">
	<meta name="authorUrl" content="http://codewithmark.com">
 
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">


	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

</head>
<body>

<div class="container text-center" style="padding-top: 25px;">
	<h2>Javascript Cookies and Local Storage</h2>

	<span class="btn btn-success btn_create">Create </span>
	
	<span class="btn btn-success btn_get">Get</span>

	<span class="btn btn-success btn_update">Update </span>

	<span class="btn btn-success btn_get_json">Get Json</span>

	<span class="btn btn-success btn_delete">Delete</span>
	</br></br>

	<select class="store_type" >
		<option value="c">Cookies</option>
		<option value="ls">Local Storage</option> 
	</select>

	</br>
	  
</div>
 

</body>

 
<script type="text/javascript">
$(document).ready(function($) 
{
	var s1_index = 'name';
	var s1_val = 'code_with_mark';
	var s2_val = JSON.stringify({name:'code with mark', site:'htttps://codewithmark.com', gift_url:'https://codewithmark.com/gift'});

	function cookie_add (cname, cvalue, exdays) 
	{
		var d = new Date();
		d.setTime(d.getTime() + (exdays*24*60*60*1000));
		var expires = "expires="+ d.toUTCString();
		document.cookie = cname + "=" + cvalue + "; " + expires;
	};
	function cookie_get (cname) 
	{
		var name = cname + "=";
		var ca = document.cookie.split(';');
		for(var i = 0; i <ca.length; i++) 
		{
			var c = ca[i];
			while (c.charAt(0)==' ') 
			{
			c = c.substring(1);
			}
			if (c.indexOf(name) == 0) 
			{
			return c.substring(name.length,c.length);
			}
		}
		return "";
	};

	function cookie_delete(name) 
	{
		document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:01 GMT;';
	};


	$('.btn_create').click(function (e) 
	{
		e.preventDefault();

		var store_type = $('.store_type').val();

		if(store_type == 'c')
		{
			cookie_add(s1_index,s1_val,1); 
		}
		else if(store_type == 'ls')
		{
			localStorage.setItem(s1_index,s1_val);
		}
		console.log('Added > ' + $('.store_type').find('option:selected').text() );
	});

 
	
	$('.btn_get').click(function (e) 
	{
		e.preventDefault();

		var store_type = $('.store_type').val();
		var v1 = '';
		if(store_type == 'c')
		{
			v1 = cookie_get(s1_index);

		}
		else if(store_type == 'ls')
		{
			v1 = localStorage.getItem(s1_index); 
		}
		console.log($('.store_type').find('option:selected').text() + ' value of > ' + v1);
	});

	

	$('.btn_get_json').click(function (e) 
	{
		e.preventDefault();

		var store_type = $('.store_type').val();
		var v1 = '';
		if(store_type == 'c')
		{
			v1 = cookie_get(s1_index);
		}
		else if(store_type == 'ls')
		{
			v1 = localStorage.getItem(s1_index);

			var m1 = $.type(JSON.parse(v1));
			console.log(m1);
		}

		console.log($('.store_type').find('option:selected').text() + ' json value of > ' , JSON.parse(v1));
	});

	


	$('.btn_update').click(function (e) 
	{
		e.preventDefault();

		var store_type = $('.store_type').val();

		if(store_type == 'c')
		{
			cookie_add(s1_index,s2_val,1); 
		}
		else if(store_type == 'ls')
		{
			localStorage.setItem(s1_index,s2_val);
		}
		console.log($('.store_type').find('option:selected').text() + ' > updated to json value');
	});
	



	$('.btn_delete').click(function (e) 
	{
		e.preventDefault();

		var store_type = $('.store_type').val();

		if(store_type == 'c')
		{
			cookie_delete(s1_index);
		}
		else if(store_type == 'ls')
		{
			localStorage.removeItem(s1_index);
		}
		console.log($('.store_type').find('option:selected').text() + ' > deleted');
	});

});
</script>
</html>
Javascript Cookies Vs Local Storage

Categories

Top Posts Viewed
