Add example using SWR to sync storage between tabs (#74)

examples/storage-tab-sync/libs/storage.js

@@ -0,0 +1,5 @@
+export default async function (key) {
+  const value = localStorage.getItem(key)
+  if (!value) return undefined
+  return JSON.parse(value)
+}

examples/storage-tab-sync/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "storage-tab-sync",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "dependencies": {
+    "next": "9.1.1",
+    "swr": "link:../.."
+  },
+  "scripts": {
+    "dev": "next",
+    "start": "next start",
+    "build": "next build"
+  }
+}

examples/storage-tab-sync/pages/index.js

@@ -0,0 +1,20 @@
+import storage from '../libs/storage'
+
+import useSWR, { mutate } from 'swr'
+
+export default () => {
+  const { data = { name: "" } } = useSWR('user-name', storage)
+
+  function handleChange(event) {
+    localStorage.setItem(
+      'user-name',
+      JSON.stringify({ name: event.target.value })
+    )
+    mutate('user-name', { name: event.target.value })
+  }
+
+  return <div style={{ textAlign: 'center' }}>
+    <label htmlFor="name">Name</label>
+    <input id="name" name="name" type="text" value={data.name} onChange={handleChange} />
+  </div>
+}