From 34c978a93970f70ff251169c64a9b1451e6cf728 Mon Sep 17 00:00:00 2001
From: remy <remy@remysharp.com>
Date: Fri, 15 Apr 2011 16:06:32 +0100
Subject: [PATCH] added storage event demo

---
 demos.json                | 11 ++++++++--
 demos/storage-events.html | 44 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 demos/storage-events.html

diff --git a/demos.json b/demos.json
index b43c0f7..3963bee 100644
--- a/demos.json
+++ b/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",
@@ -15,8 +23,7 @@
     "notes": "Uses onpopstate event",
     "tags": "history",
     "support": {
-      "live": "chrome safari",
-      "nightly": "firefox"
+      "live": "chrome safari firefox"
     },
     "test": "Modernizr.history"
   },
diff --git a/demos/storage-events.html b/demos/storage-events.html
new file mode 100644
index 0000000..bdef67b
--- /dev/null
+++ b/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>