hooks icon indicating copy to clipboard operation
hooks copied to clipboard

Published 20 hours ago • verified publisher icon alibaba

feat(useStoage): listen to `storage` event

Open vaakian opened this issue 1 year ago • 7 comments

[中文版模板 / Chinese template]

🤔 This is a ...

  • [x] 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 https://github.com/alibaba/hooks/pull/1580

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. ⚠️

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

vaakian avatar Aug 19 '23 04:08 vaakian

related: https://github.com/alibaba/hooks/issues/1433

liuyib avatar Aug 19 '23 09:08 liuyib

Please add a demo and a test case @vaakian

liuyib avatar Aug 19 '23 09:08 liuyib

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.

vaakian avatar Aug 19 '23 14:08 vaakian

  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.

liuyib avatar Aug 21 '23 07:08 liuyib

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

vaakian avatar Aug 21 '23 17:08 vaakian

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

2218675712 avatar Oct 20 '23 06:10 2218675712

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

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

liuyib avatar Oct 20 '23 06:10 liuyib

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

cwtuan avatar Apr 09 '24 06:04 cwtuan

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

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

liuyib avatar Apr 09 '24 06:04 liuyib

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

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

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

cwtuan avatar Apr 09 '24 07:04 cwtuan