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 PHP Developers
Your Next PHP Project Could Make You Money for Years
Most developers get paid once for the code they write. But the developers building real wealth use those same skills to create products that generate income over and over again.
A simple SaaS, plugin, web app, or digital product can continue bringing in customers long after it's launched.
Learn How Developers Build Monthly Income →
