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>
