博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
浏览器内多个标签页之间的通信之storage
阅读量:5907 次
发布时间:2019-06-19

本文共 1135 字,大约阅读时间需要 3 分钟。

在一个标签页里面使用 localStorage.setItem(key,value)添加(修改、删除)内容; 

在另一个标签页里面监听 storage 事件。 
即可得到 localstorge 存储的值,实现不同标签页之间的通信(不同标签页,但可以为同一页面)。

   

 

 
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://打开无效,必须在服务器环境下才能成功

转载于:https://www.cnblogs.com/kdcg/p/9099331.html

你可能感兴趣的文章
9Python全站之路系列之MySQL SL注入
查看>>
phantomjs-循环输出输入参数
查看>>
ListBox自绘,列表显示一系列图片
查看>>
控件名称不可修改
查看>>
综述:人工智能、数据科学、机器学习
查看>>
SQL
查看>>
c# 下载网页图片
查看>>
虚拟机上网配置
查看>>
Know More about Oracle PGA Memory
查看>>
LNMP服务跨省迁移的解决方案
查看>>
sigar模块之python api简单的使用--获取cpu信息
查看>>
iptables的状态检测机制
查看>>
Go语言之嵌入类型
查看>>
PIX7.0软件的安装及ASDM可视化管理软件的安装
查看>>
python中os.listdir的排序问题
查看>>
tomcat配置安装1
查看>>
web安全---Token
查看>>
接口规范 11. 串流相关接口
查看>>
zebra 安装失败
查看>>
CCNA配置试验之四 OSPF协议的配置
查看>>