浏览器内多个标签页之间的通信之storage
程序员文章站
2022-04-06 10:52:41
在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容； 在另一个标签页里面监听 storage 事件。 即可得到 localstorge 存储的值，实现不同标签页之间的通信（不同标签页，但可以为同一页面）。 var addEvent = (fun ......
在一个标签页里面使用 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://打开无效，必须在服务器环境下才能成功
上一篇： Java调用windows命令