浏览器跨标签通讯

localStorage会触发一个事件，不论其中的哪一项在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件。

不论在哪个浏览器的标签页里访问了 localStorage，所有其它的标签页都能通过 window 对象监听到这个事件，如下：  

window.addEventListener('storage', function (event) {
  console.log(event.key, event.newValue);
});

 

 

event 对象有几个相应的属性：

属性	描述
key	localStroage 中被影响的键
newValue	为这个键所赋的新值
oldValue	这个键修改前的值
url	当前发生改变的页面 URL

不论某个标签页在何时修改了 localStorage，都会对其余的所有标签触发事件。这就意味着我们只要为 localStorage 赋值，就能够跨浏览器标签通信了。请看下面伪代码风格的示例： 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

var loggedOn;   // TODO: call when logged-in user changes or logs out logonChanged();   window.addEventListener('storage', updateLogon); window.addEventListener('focus', checkLogon);   function getUsernameOrNull () {   // TODO: return whether the user is logged on }   function logonChanged () {   var uname = getUsernameOrNull();   loggedOn = uname;   localStorage.setItem('logged-on', uname); }   function updateLogon (event) {   if (event.key === 'logged-on') {     loggedOn = event.newValue;   } }   function checkLogon () {   var uname = getUsernameOrNull();   if (uname !== loggedOn) {     location.reload();   } }

 

local-storage@1.3.1 中最新的 API 端点（译者注：2015-01-08） 如下：

• ls(key, value?) 取得或设置键
• ls.get(key) 取得键的值
• ls.set(key, value) 为键指定值
• ls.remove(key) 移除键
• ls.on(key, fn(value, old, url)) 监听其它标签页的键值改变并触发 fn
• ls.off(key, fn) 取消之前使用 ls.on 注册的监听器

local-storage 注册了一个单一的 storage 对象处理器并保持你对每个键的跟踪，而不是注册多个 storage 对象。

转载于:https://www.cnblogs.com/zzcit/p/6045743.html