Find file
ad614ee Mar 4, 2010
75 lines (62 sloc) 1.83 KB
<title>Storage</title>
<style>
article div {
margin: 10px 0;
}
label {
float: left;
display: block;
width: 125px;
line-height: 32px;
}
</style>
<article>
<section>
<p>Values are stored on <code>keyup</code></p>
<p>Content loaded from previous sessions:</p>
<ul id="previous"></ul>
</section>
<section>
<div>
<label for="session">sessionStorage:</label>
<input type="text" name="session" value="" id="session" />
</div>
<div>
<label for="local">localStorage:</label>
<input type="text" name="local" value="" id="local" />
</div>
<input type="button" id="clear" value="Clear storage" />
</section>
</article>
<script>
function getStorage(type) {
var storage = window[type + 'Storage'],
delta = 0,
li = document.createElement('li');
if (!window[type + 'Storage']) return;
if (storage.getItem('value')) {
delta = ((new Date()).getTime() - (new Date()).setTime(storage.getItem('timestamp'))) / 1000;
li.innerHTML = type + 'Storage: ' + storage.getItem('value') + ' (last updated: ' + delta + 's ago)';
} else {
li.innerHTML = type + 'Storage is empty';
}
document.querySelector('#previous').appendChild(li);
}
getStorage('session');
getStorage('local');
addEvent(document.querySelector('#session'), 'keyup', function () {
sessionStorage.setItem('value', this.value);
sessionStorage.setItem('timestamp', (new Date()).getTime());
});
addEvent(document.querySelector('#local'), 'keyup', function () {
localStorage.setItem('value', this.value);
localStorage.setItem('timestamp', (new Date()).getTime());
});
addEvent(document.querySelector('#clear'), 'click', function () {
sessionStorage.clear();
localStorage.clear();
document.querySelector('#previous').innerHTML = '';
getStorage('local');
getStorage('session');
});
</script>