在一个标签页里面使用 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://打开无效，必须在服务器环境下才能成功
每一次的记录，都是向前迈进的一步