<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>
localStorage and sessionStorage – doctypehtml.net
</title>
<base href="http://doctypehtml.net/">
<link rel="stylesheet" href="http://doctypehtml.net/assets/css/layout.css" type="text/css">
<link rel="stylesheet" href="http://doctypehtml.net/assets/css/mobile.css" type="text/css" media="screen and (max-width: 780px)">
<link href="http://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://doctypehtml.net/assets/js/jquery.DOMWindow.js"></script><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="http://maps.google.com/maps/api/js?sensor=true&key=ABQIAAAApI58w98iPWfY3kRwSUeY8xQ68YkQG_qXsZ3UoXoMI3aQuc_oDxRhXW-0yaqFDptD-MysiRffOXJ_vg" type="text/javascript"></script>
<script src="http://code.google.com/apis/gears/gears_init.js" type="text/javascript"></script>
<script src="http://better-geolocation-api.googlecode.com/files/geolocation.js" type="text/javascript"></script>
<link href="http://doctypehtml.net/html5/localstorage-sessionstorage//css/geolocation.css" rel="stylesheet" type="text/css">
</head>
<body>
<a href="http://github.com/manuelbieh/doctypehtml.net"><img style="position: absolute; top: 0; right: 0; border: 0;" src=
"https://a248.e.akamai.net/assets.github.com/img/7afbc8b248c68eb468279e8c17986ad46549fb71/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"></a>
<div id="wrapper">
<header>
<h1>
<a href="/"><!DOCTYPEhtml.net><br>
HTML5/CSS3 Demos + Experiments</a>
</h1>
</header>
<section id="content">
<h2>
localStorage + sessionStorage
</h2>
<p>
Local key/value store. Can also store JSON objects.
</p>
<script>
function getTime() {
date = new Date();
return date.getFullYear() +'-'+ (date.getMonth()+1) +'-'+ + date.getDate() + ', ' + date.getHours() + ':' + date.getMinutes() +':' + date.getSeconds();
}
$(function() {
$('#localStorage').bind('keyup', function() {
localStorage.setItem('storageDemo', $(this).val());
localStorage.setItem('time', getTime());
});
$('#sessionStorage').bind('keyup', function() {
sessionStorage.setItem('storageDemo', $(this).val());
sessionStorage.setItem('time', getTime());
});
$('#clear').bind('click', function() {
localStorage.clear();
sessionStorage.clear();
});
var lS = localStorage.getItem('storageDemo');
var sS = sessionStorage.getItem('storageDemo');
if(lS) {
$('#lScontent span').text(lS);
$('#lScontent em').text('(saved on: ' + localStorage.getItem('time')+')');
}
if(sS) {
$('#sScontent span').text(sS);
$('#sScontent em').text('(saved on: ' + sessionStorage.getItem('time')+')');
}
});
</script>
<section class="col50">
<p>
Type something and refresh the page.
</p>
<p>
<label for="localStorage">localStorage content:</label><br>
<input type="text" id="localStorage" maxlength="100">
</p>
<p>
<label for="sessionStorage">sessionStorage content:</label><br>
<input type="text" id="sessionStorage" maxlength="100">
</p>
</section>
<section class="col50">
<p id="lScontent">
<strong>localStorage content:</strong> <span><i>empty</i></span>
</p>
<p id="sScontent">
<strong>sessionStorage content:</strong> <span><i>empty</i></span>
</p>
<p>
<button id="clear">Clear storage</button>
</p>
</section><br style="clear: both;">
</section>
</div>
<footer>
<div>
<a href="http://doctypehtml.net/index.html">Overview</a> – All examples are lovingly handcrafted by <a href="http://www.twitter.com/ManuelBieh">@ManuelBieh</a> | <a href=
"http://www.manuel-bieh.de/en/">http://www.manuel-bieh.de</a>. Inspired by <a href="http://www.html5demos.com">html5demos.com</a> from the great <a href=
"http://www.twitter.com/rem">@rem</a> | <a href="http://doctypehtml.net/viewsource/index.php?url=http://doctypehtml.net/html5/localstorage-sessionstorage/" class="viewsource">view
source</a> | <iframe src="http://platform.twitter.com/widgets/tweet_button.html?url=http://doctypehtml.net/&via=manuelbieh" style=
"vertical-align: middle; width: 110px; height: 21px; overflow: hidden; border: 0;"></iframe> <iframe src=
"http://www.facebook.com/plugins/like.php?href=http://doctypehtml.net/&send=false&layout=button_count&width=130&show_faces=false&action=recommend&colorscheme=light&font&height=21"
style="vertical-align: middle; border:none; overflow:hidden; width:130px; height:21px; overflow: hidden; border: 0;"></iframe>
<div class="g-plusone" data-size="medium" data-count="true"></div>
</div>
</footer>
<script>
$('.viewsource').openDOMWindow({
height:'90%',
width:'90%',
positionType:'absolute',
positionTop:50,
eventType:'click',
positionLeft:'5%',
windowSource:'iframe',
windowPadding:0,
loader:1,
// loaderImagePath:'animationProcessing.gif',
loaderHeight:16,
loaderWidth:17
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-16083973-9']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
</body>
</html>