added storage event demo

This commit is contained in:
remy 2011-04-15 16:06:32 +01:00
parent b8f88cdf69
commit 34c978a939
2 changed files with 53 additions and 2 deletions

View File

@ -1,4 +1,12 @@
[
{
"desc": "Storage events",
"url": "storage-events",
"tags": "storage",
"support": {
"live": "chrome safari opera firefox"
}
},
{
"desc": "dataset (data-* attributes)",
"url": "dataset",
@ -15,8 +23,7 @@
"notes": "Uses onpopstate event",
"tags": "history",
"support": {
"live": "chrome safari",
"nightly": "firefox"
"live": "chrome safari firefox"
},
"test": "Modernizr.history"
},

44
demos/storage-events.html Normal file
View File

@ -0,0 +1,44 @@
<title>Storage Events</title>
<style>
article div {
margin: 10px 0;
}
label {
float: left;
display: block;
width: 125px;
line-height: 32px;
}
#fromEvent {
border: 1px solid #ccc;
padding: 10px;
}
</style>
<article>
<section>
<p><strong>Directions:</strong> open multiple windows or tabs with <a href="/storage-events">this demo</a> and change the text below.</p>
<p>The <code>storage</code> event triggers on the "blurred" windows, giving us a way to communicate across windows using <code>localStorage</code>.</p>
<div>
<p><label for="data">Your test data:</label> <input type="text" name="data" value="" placeholder="change me" id="data" /> <small>(this is only echoed on <em>other</em> windows)</small></p>
<p id="fromEvent">Waiting for data via <code>storage</code> event...</p>
</div>
</section>
</article>
<script>
var dataInput = document.getElementById('data'),
output = document.getElementById('fromEvent');
addEvent(window, 'storage', function (event) {
if (event.key == 'storage-event-test') {
output.innerHTML = event.newValue;
}
});
addEvent(dataInput, 'keyup', function () {
localStorage.setItem('storage-event-test', this.value);
});
</script>