Code With Mark
Home
About
Resources
Contact

Javascript Cookies Vs Local Storage

Which One Is Better For Your Web App ?

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>
For Web Developers

Why Are You Still Getting Paid Only Once?

You spend weeks building a project.

Your client pays you.

Then the income stops.

Meanwhile, other developers are turning similar skills into products that generate revenue month after month.

A SaaS, plugin, web app, or digital product can continue bringing in customers long after it's launched.

The real question isn't whether you can build one.

It's how much money you're leaving on the table by not starting.

Learn How To Build Monthly Income →
Easily Send JSON Data And Upload Multiple FileEasily Send JSON Data And Upload Multiple File←Previous
jquery session timeoutjquery session timeoutNext→

Related Posts

  • How Google Developers Think (And Why You Should Too)
  • Add Google Sign-In in 2 Minutes
  • Form Validation in 1 Line

Top Posts Viewed

Easily Edit HTML Table Rows Or Cells With jQuery
366 views
How To Create A Secure Login System With PHP And MySQL
263 views
PHP Simple Database Class
256 views

Categories

Courses
Excel
Google Script
Javascript
jQuery
Microsoft Access
MongoDB
Node JS
PHP
Quick Tip
Uncategorized
Wordpress