Skip to content
Browse files

added storage event demo

  • Loading branch information...
1 parent b8f88cd commit 34c978a93970f70ff251169c64a9b1451e6cf728 @remy committed Apr 15, 2011
Showing with 53 additions and 2 deletions.
  1. +9 −2 demos.json
  2. +44 −0 demos/storage-events.html
View
11 demos.json
@@ -1,5 +1,13 @@
[
{
+ "desc": "Storage events",
+ "url": "storage-events",
+ "tags": "storage",
+ "support": {
+ "live": "chrome safari opera firefox"
+ }
+ },
+ {
"desc": "dataset (data-* attributes)",
"url": "dataset",
"tags": "dataset",
@@ -15,8 +23,7 @@
"notes": "Uses onpopstate event",
"tags": "history",
"support": {
- "live": "chrome safari",
- "nightly": "firefox"
+ "live": "chrome safari firefox"
},
"test": "Modernizr.history"
},
View
44 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.
Something went wrong with that request. Please try again.