bemson · November 9, 2015 06:58
diff --git a/dabblet.css b/dabblet.css
 /**
 * 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%;}
diff --git a/dabblet.html b/dabblet.html
 <!-- 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>
diff --git a/dabblet.js b/dabblet.js
 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>'    ;}
diff --git a/settings.json b/settings.json
 {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}
	/**
	* 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>