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