实现同一页面多tab时的状态同步
- 2019 年 12 月 26 日
- 筆記
不同tab的js执行环境是不同的，因此变量不会共享，watcher也不会互相影响。
可以利用 storage事件监控localstorge的变化 ，storege事件只能注册在window上
创建两个页面 A和B 分别在不同的Tab打开
<!DOCTYPE html> <html> <head lang="en"> <title>A</title> </head> <body> <script> window.addEventListener("storage", function (e) { alert(e.newValue); }); </script> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <title>B</title> </head> <body> <script> localStorage.clear(); localStorage.setItem('foo', 'bar'); </script> </body> </html>
