feat(useStoage): listen to storage event

[vaakian]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

💡 Background and solution

Listen to storage event so that the state can always in sync with the Stoage.

close #1433
close #1580
close #2491
close #2516

eg:

• Updated by a different component but with the same key
• Or update from a new tab and state could be in sync cross tabs

📝 Changelog

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[liuyib]

related: #1433

[liuyib]

Please add a demo and a test case @vaakian

[vaakian]

According to the issue you've mentioned, I found that the storage event doesn't work on the same page, so I manually dispatched the SYNC_STORAGE_EVENT to do that.

[liuyib]

1. we shouldn't change the previous behavior of useLocalStorageState/useSessionStorageState, otherwise it will be a breaking changes. So I revert your code in __tests__ file and add a listenStorageChange parameter to control whether to sync state between different browser tabs.
2. when a storage event is triggered by dispatchEvent, it is best to pass all the properties of StorageEvent, which we should be consistent with the original storage event.

@vaakian please don't mind, I changed your code directly, if I made some wrong changes, please feel free to let me known.

[vaakian]

Great, you've just fixed everything and I believe that's gonna be the final answer

[2218675712]

这个更新什么时候能 正式发布呢

[liuyib]

这个更新什么时候能 正式发布呢

v4 大版本，时间可能是最近两个月

[bowencool]

syncStateFromCustomEvent will be triggered by its own updateState function, causing the setState method to be called twice.

[Damon0820]

because its own listener also detect its own trigger. whether can we use const hookId = useRef(Symbol(xx)) as current hook's identify. when calling dispatchEvent , pass the hookId. In syncStateFromCustomEvent, compare hookId.
sorry, English is poor.

[liuyib]

@bowencool Thank you, I will check it again and fix.

[bowencool]

I believe that these codes can help:

  const updateState = (value?: SetState<T>) => {
      const currentState = isFunction(value) ? value(state) : value;
+    if (!listenStorageChange) {
        setState(currentState);
+   }
  ...

[cwtuan]

这个哪时候可以合并，大半年了

[liuyib]

这个哪时候可以合并，大半年了

可以先自己把代码复制到本地建一个 hook 用着，等这个合进去再从 ahooks 导入

[cwtuan]

这个哪时候可以合并，大半年了

可以先自己把代码复制到本地建一个 hook 用着，等这个合进去再从 ahooks 导入

临时方案没问题的，想请问一下，大概预计哪时候可以合并呢？