浏览器内多标签通信

实现浏览器内多标签通信有多种方法， 可以使用WebSocket、SharedWorker；也可以调用localstorge、cookies等本地存储方式；这里介绍使用localStorage方法实现。

使用 localStorage实现浏览器内多标签通信

localstorge在一个标签页里被添加、修改或删除时，都会触发一个storage事件，通过在另一个标签页里监听storage事件，即可得到localstorge存储的值，实现不同标签页之间的通信。

下面的例子是由b页面监听a页面的事件变化并记录

//a.html



    
    

    

    

页面a中只有一个输入框和一个提交按钮，当点击提交后，用localStorage.setItem进行数据存储

//b.html



    
    
    

    

ｂ页面中使用addEventListener进行事件监听，输出事件信息

实现效果：

a

b