From de0cf6c73b15d1db028aac5fcf203f4b5d03f31a Mon Sep 17 00:00:00 2001
From: Jet Li <jing.i.qin@icloud.com>
Date: Tue, 3 May 2022 11:11:50 +0800
Subject: [PATCH] add storage event listener to use_local_storage

---
 crates/yew-hooks/Cargo.toml                     |  1 +
 crates/yew-hooks/src/hooks/use_local_storage.rs | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/crates/yew-hooks/Cargo.toml b/crates/yew-hooks/Cargo.toml
index 5079a0b..549a039 100644
--- a/crates/yew-hooks/Cargo.toml
+++ b/crates/yew-hooks/Cargo.toml
@@ -51,6 +51,7 @@ features = [
     "HtmlLinkElement",
     "HtmlCollection",
     "Blob",
+    "StorageEvent",
 ]
 
 [dev-dependencies]
diff --git a/crates/yew-hooks/src/hooks/use_local_storage.rs b/crates/yew-hooks/src/hooks/use_local_storage.rs
index bfa1e92..cef4fe4 100644
--- a/crates/yew-hooks/src/hooks/use_local_storage.rs
+++ b/crates/yew-hooks/src/hooks/use_local_storage.rs
@@ -3,8 +3,11 @@ use std::rc::Rc;
 
 use gloo::storage::{LocalStorage, Storage};
 use serde::{Deserialize, Serialize};
+use web_sys::StorageEvent;
 use yew::prelude::*;
 
+use super::use_event_with_window;
+
 /// State handle for the [`use_local_storage`] hook.
 pub struct UseLocalStorageHandle<T> {
     inner: UseStateHandle<Option<T>>,
@@ -103,5 +106,17 @@ where
         use_state(|| LocalStorage::get(&key).unwrap_or_default());
     let key = use_ref(|| key);
 
+    {
+        let key = key.clone();
+        let inner = inner.clone();
+        use_event_with_window("storage", move |e: StorageEvent| {
+            if let Some(k) = e.key() {
+                if k == *key {
+                    inner.set(LocalStorage::get(&*key).unwrap_or_default())
+                }
+            }
+        });
+    }
+
     UseLocalStorageHandle { inner, key }
 }