Skip to content

Commit

Permalink
added storage event demo
Browse files Browse the repository at this point in the history
  • Loading branch information
remy committed Apr 15, 2011
1 parent b8f88cd commit 34c978a
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 2 deletions.
11 changes: 9 additions & 2 deletions demos.json
@@ -1,4 +1,12 @@
[
{
"desc": "Storage events",
"url": "storage-events",
"tags": "storage",
"support": {
"live": "chrome safari opera firefox"
}
},
{
"desc": "dataset (data-* attributes)",
"url": "dataset",
Expand All @@ -15,8 +23,7 @@
"notes": "Uses onpopstate event",
"tags": "history",
"support": {
"live": "chrome safari",
"nightly": "firefox"
"live": "chrome safari firefox"
},
"test": "Modernizr.history"
},
Expand Down
44 changes: 44 additions & 0 deletions demos/storage-events.html
@@ -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>

0 comments on commit 34c978a

Please sign in to comment.