Skip to content

Instantly share code, notes, and snippets.

@bemson
Last active November 9, 2015 06:58
Show Gist options
  • Save bemson/06bef99a2a07c51723ae to your computer and use it in GitHub Desktop.
Save bemson/06bef99a2a07c51723ae to your computer and use it in GitHub Desktop.
localStorage test
/**
* localStorage test
* copied from http://jsbin.com/hofove
*/
#placer { position: absolute; left: 2.5%; width: 95%; top: 7.5em; bottom: 1.5em;}#placer iframe { background: #eee; width: 100%; height: 100%;}
<!-- content to be placed inside <body>…</body> -->
<h1>Iframed localStorage test</h1>
<p>This iframe features <a href="http://output.jsbin.com/hofove/">a localStorage test</a> for the different-origin: <em>s.cssdeck.com</em>.</p>
<div id="placer">
<iframe
src="http://cssdeck.com/labs/full/rzvtoo32"
sandbox="allow-scripts allow-top-navigation allow-same-origin">
</iframe>
</div>
var writer = document.getElementById('foowriter'), reader = document.getElementById('fooreader'), value = document.getElementById('foovalue'), cleaner = document.getElementById('foocleaner'), details = document.getElementById('details'), kicker = document.getElementById('storagekicker'), watching = 0, meta = { start: Date.now(), evts: 0, last: 0 };writer.addEventListener('click', function (e) { e.preventDefault(); localStorage.setItem( 'foo', (Math.round( Math.random() * Date.now() )).toString(32) ); updateDetails();}, false);reader.addEventListener('click', function (e) { e.preventDefault(); value.innerText = localStorage.getItem('foo'); if (!watching) { watching = 1; window.addEventListener( 'storage', watchForFoo, false ); } meta.last = Date.now(); updateDetails();}, false);kicker.addEventListener('click', function (e) { e.preventDefault(); localStorage.setItem('helterskelter', 1); localStorage.removeItem('helterskelter'); updateDetails();}, false);cleaner.addEventListener('click', function (e) { localStorage.removeItem('foo'); updateDetails();}, false);updateDetails();function watchForFoo(e) { if ( e && e.key == 'foo' ) { value.innerText = e.newValue; meta.last = Date.now(); } meta.evts++; updateDetails();}function updateDetails() { var methodKeys = Object.keys(localStorage), LSln = localStorage.length, i = 0, lnKeys = [] ; for (; i < LSln; i++) { lnKeys.push(localStorage.key(i)); } details.innerHTML = '<dt>start time:</dt><dd>' + meta.start + '</dd><dt># storage events:</dt><dd>' + meta.evts + '</dd><dt>last read time:</dt><dd>' + meta.last + '</dd><dt><code>localStorage.length</code>:</dt><dd>' + LSln + '</dd>' + '<dt><code>Object.keys(localStorage).length</code>:</dt><dd>' + methodKeys.length + '</dd>' + '<dt>Keys found with <code>localStorage.key()</code></dt><dd>"' + lnKeys.join(', ') + '"</dd>' + '<dt>Keys found with <code>Object.keys(localStorage)</code></dt><dd>"' + methodKeys.join(', ') + '"</dd>' ;}
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment