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

在一个标签页里面使用 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://打开无效，必须在服务器环境下才能成功

每一次的记录，都是向前迈进的一步