浏览器内多个标签页之间的通信之storage

javascript/jquery

浏览数:163

2019-9-17

AD:资源代下载服务

在一个标签页里面使用 localStorage.setItem(key,value)添加(修改、删除)内容; 
在另一个标签页里面监听 storage 事件。 
即可得到 localstorge 存储的值,实现不同标签页之间的通信(不同标签页,但可以为同一页面)。

 <style>
    #data, #fromEvent {
      width: 400px;
      height: 100px;
      border: 1px solid #666;
      margin: 50px auto 20px;
      padding: 10px;
    }
  </style>
<div id="data" contenteditable="true"></div> <div id="fromEvent"></div> <button id="save">storage</button>

  var addEvent = (function() {   if (document.addEventListener) {     return function(el, type, fn) {       if (el.length) {         for (var i = 0; i < el.length; i++) {           addEvent(el[i], type, fn);         }       } else {         el.addEventListener(type, fn, false);       }     };   } else {     return function(el, type, fn) {       if (el.length) {         for (var i = 0; i < el.length; i++) {           addEvent(el[i], type, fn);         }       } else {         el.attachEvent(‘on’ + type,         function() {           return fn.call(el, window.event);         });       }     };   } })();   var dataInput = document.getElementById(‘data’),    output = document.getElementById(‘fromEvent’),    save = document.getElementById(‘save’);

addEvent(window, ‘storage’, function (event) {   if (event.key == ‘storage-event-test’) {     output.innerHTML =”key:”+event.key+” —- old:”+event.oldValue+” —- new:”+ event.newValue;   } });

addEvent(save, ‘click’, function () {   localStorage.setItem(‘storage-event-test’, dataInput.innerHTML); });

ps: storage事件以file://打开无效,必须在服务器环境下才能成功

作者:前端杂货