Last active
August 29, 2015 14:22
-
-
Save richplastow/4d8ff347f7b56f1de18b to your computer and use it in GitHub Desktop.
Test LocalStorage
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>LocalStorage Test</title> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
<!-- 20150603^RP --> | |
<style> | |
body { | |
font-size: 14px; | |
} | |
pre { | |
width: 95%; | |
padding: .5em; | |
border: 0.1em solid silver; | |
} | |
button, input { | |
padding: .5em; | |
font-size: 1em; | |
} | |
@media (min-width: 600px) { | |
body { | |
font-size: 18px; | |
} | |
} | |
@media (min-width: 900px) { | |
body { | |
font-size: 24px; | |
} | |
} | |
@media (min-width: 1200px) { | |
body { | |
font-size: 32px; | |
} | |
} | |
@media (min-width: 1800px) { | |
body { | |
font-size: 38px; | |
} | |
} | |
@media (min-width: 2400px) { | |
body { | |
font-size: 48px; | |
} | |
} | |
</style> | |
<script> | |
//// When the DOM is ready, set up and boot the LocalStorage research. | |
window.addEventListener('load', function () { (function (d) { 'use strict'; | |
//// Shortcut `getElementById()`. | |
var $ = d.getElementById.bind(d) | |
//// Logs a message to the `<pre id="log">` element. | |
, $log = $('log') | |
, log = function (msg, indent) { $log.innerHTML += msg + '\n' + (indent || ''); } | |
//// Simulates a mouse click on the given element. | |
//// http://mdn.beonex.com/en/DOM/element.dispatchEvent.html | |
, simulateClick = function ($el) { | |
var evt = document.createEvent('MouseEvents'); | |
evt.initMouseEvent('click', true, true, window, | |
0, 0, 0, 0, 0, false, false, false, false, 0, null); | |
var canceled = ! $el.dispatchEvent(evt); | |
if (canceled) { | |
// A handler called preventDefault | |
} else { | |
// None of the handlers called preventDefault | |
} | |
} | |
; | |
//// Attach behavior to the 'Test' button. | |
$('test').addEventListener('click', function () { | |
$log.innerHTML = ''; | |
$log.innerHTML += '#clear... '; simulateClick( $('clear') ); | |
$log.innerHTML += '#length... '; simulateClick( $('length') ); | |
log('Set key to: "nope"') ; $('key').value = 'nope'; | |
$log.innerHTML += '#getItem... '; simulateClick( $('getItem') ); | |
log('Set key to: "foo"') ; $('key').value = 'foo'; | |
log('Set value to: "bar"') ; $('value').value = 'bar'; | |
$log.innerHTML += '#hasOwnProperty... '; simulateClick( $('hasOwnProperty') ); | |
$log.innerHTML += '#setItem... '; simulateClick( $('setItem') ); | |
$log.innerHTML += '#hasOwnProperty... '; simulateClick( $('hasOwnProperty') ); | |
log('Set key to: ""') ; $('key').value = ''; | |
log('Set value to: "123"') ; $('value').value = '123'; | |
$log.innerHTML += '#setItem... '; simulateClick( $('setItem') ); | |
$log.innerHTML += '#getItem... '; simulateClick( $('getItem') ); | |
log('Set value to: ""') ; $('value').value = ''; | |
$log.innerHTML += '#setItem... '; simulateClick( $('setItem') ); | |
$log.innerHTML += '#getItem... '; simulateClick( $('getItem') ); | |
$log.innerHTML += '#length... '; simulateClick( $('length') ); | |
$log.innerHTML += '#hasOwnProperty... '; simulateClick( $('hasOwnProperty') ); | |
$log.innerHTML += '#removeItem... '; simulateClick( $('removeItem') ); | |
$log.innerHTML += '#hasOwnProperty... '; simulateClick( $('hasOwnProperty') ); | |
$log.innerHTML += '#dump... '; simulateClick( $('dump') ); | |
$log.innerHTML += '#length... '; simulateClick( $('length') ); | |
$log.innerHTML += '#clear... '; simulateClick( $('clear') ); | |
$log.innerHTML += '#length... '; simulateClick( $('length') ); | |
// @todo test Storage events | |
var expected = [ | |
'#clear... Already empty' | |
, '#length... 0' | |
, 'Set key to: "nope"' | |
, '#getItem... null' | |
, 'Set key to: "foo"' | |
, 'Set value to: "bar"' | |
, '#hasOwnProperty... false' | |
, '#setItem... undefined' | |
, '#hasOwnProperty... true' | |
, 'Set key to: ""' | |
, 'Set value to: "123"' | |
, '#setItem... undefined' | |
, '#getItem... 123' | |
, 'Set value to: ""' | |
, '#setItem... undefined' | |
, '#getItem... ' | |
, '#length... 2' | |
, '#hasOwnProperty... true' | |
, '#removeItem... undefined' | |
, '#hasOwnProperty... false' | |
, '#dump... foo: bar' | |
, '#length... 1' | |
, '#clear... undefined' | |
, '#length... 0' | |
, '' | |
]; | |
if ( $log.innerHTML === expected.join('\n') ) { | |
$log.innerHTML = '<span style="color:#090">---- Pass ----</span>\n' + $log.innerHTML; | |
} else { | |
$log.innerHTML = '<span style="color:red">---- Fail ----</span>\n' + $log.innerHTML; | |
} | |
}); | |
//// Attach behaviors to the other buttons. | |
$('length').addEventListener('click', function () { | |
try { | |
log( localStorage.length ); | |
} catch (e) { log('length() error:', ' '); log(e); } | |
}); | |
$('setItem').addEventListener('click', function () { | |
try { | |
log( localStorage.setItem( $('key').value, $('value').value ) ); | |
} catch (e) { log('setItem() error:', ' '); log(e); } | |
}); | |
$('getItem').addEventListener('click', function () { | |
try { | |
log( localStorage.getItem( $('key').value ) ); | |
} catch (e) { log('getItem() error:', ' '); log(e); } | |
}); | |
$('removeItem').addEventListener('click', function () { | |
try { | |
log( localStorage.removeItem( $('key').value ) ); | |
} catch (e) { log('removeItem() error:', ' '); log(e); } | |
}); | |
$('hasOwnProperty').addEventListener('click', function () { | |
try { | |
log( localStorage.hasOwnProperty( $('key').value ) ); | |
} catch (e) { log('hasOwnProperty() error:', ' '); log(e); } | |
}); | |
$('clear').addEventListener('click', function () { | |
try { | |
if (localStorage.length) { | |
log( localStorage.clear() ); | |
} else { | |
log('Already empty'); | |
} | |
} catch (e) { log('clear() error:', ' '); log(e); } | |
}); | |
$('dump').addEventListener('click', function () { | |
try { | |
if (! localStorage.length) { | |
log('Empty storage'); | |
} else { | |
for (var key, i=0, l=localStorage.length; i<l; i++) { | |
key = localStorage.key(i); | |
log( key + ': ' + localStorage.getItem(key) ); | |
} | |
} | |
} catch (e) { log('dump() error:', ' '); log(e); } | |
d}); | |
//// Listen for changes to the storage. | |
window.addEventListener('storage', function(e) { | |
log( "Key '" + e.key + "' of storageArea '" + e.storageArea + "'"); | |
if (null === e.oldValue) { | |
log( "Was created, as '" + e.newValue + "'"); | |
} else { | |
log( "Changed from '" + e.oldValue + "' to '" + e.newValue + "'"); | |
} | |
log( "URL: " + e.url); | |
}); | |
//// Run some checks. @todo more | |
if (! window.localStorage) { log('no window.localStorage available!'); } | |
//// Run 'Test' if the URL hash fragment is '#test' (good for BrowserStack). | |
if ('#test' === location.hash) { | |
simulateClick( $('test') ); | |
} | |
}).call(this, document) }); | |
</script> | |
</head> | |
<body> | |
<h1>LocalStorage Test</h1> | |
<label for="key">Key</label> | |
<input type="text" id="key"> | |
<label for="value">Value</label> | |
<input type="text" id="value"> | |
<br> | |
<button id="length">length</button> | |
<button id="setItem">setItem()</button> | |
<button id="getItem">getItem()</button> | |
<button id="removeItem">removeItem()</button> | |
<button id="hasOwnProperty">hasOwnProperty()</button> | |
<button id="clear">clear()</button> | |
<br> | |
<button id="dump">Dump</button> | |
<button id="test">Test</button> | |
<pre id="log">Log: | |
</pre> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment