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

在一个标签页里面使用 localStorage.setItem(key,value)添加（修改、删除）内容；
在另一个标签页里面监听 storage 事件。
即可得到 localstorge 存储的值，实现不同标签页之间的通信（不同标签页，但可以为同一页面）。

var addEvent = (function() {
    if(document.addEventListener) {
        return function(el, type, fn) {
            if(el && el.nodeName || el === window) {
                el.addEventListener(type, fn, false);
            } else if (el && el.length) {
                for(var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    } else {
        return function(el, type, fn) {
            if(el && el.nodeName || el === window) {
                el.attachEvent('on' + type, function() {
                    return fn.call(el, window.event);
                });
            } else if (el && el.length) {
                for(var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            }
        };
    }
})();

if(isSupportLocalStorage()) {
　　// 清除所有存储的key,value值
　　// localStorage.clear();

　　var dataInput = document.getElementById('data'),
　　saveBtn = document.getElementById('saveBtn');

　　addEvent(saveBtn, 'click', function () {
　　　　// 按下按钮存下当前输入框中的值
　　　　localStorage.setItem('storage-event-test', dataInput.value);
　　}); 

　　// 给window监听storage事件 
　　addEvent(window, 'storage', function (event) {
　　　　// 查看event对象内容
　　　　// console.dir(event);
　　　　// 输出oldValue和newValue 以作观察 
　　　　console.log('key: %s, old value: %s, new value: %s', event.key, event.oldValue, event.newValue);
　　});

　　// 存储数字
　　localStorage.setItem('number', 1);
　　// 存储对象 因为localStorage最终都是以String来存储的 所以如果要存储对象 可以覆写它的toString方法
　　// 按照你想要的字符串格式来存储, 然后取出后再做相应的处理, 这里就拿json格式做个例子
　　localStorage.setItem('obj', "{'name':'Andrew', 'job': 'Developer'}");
　　// 常规的存储
　　localStorage.setItem('string', 'hello world');

} else {
　　// 这里可以做些降级的方案, 当然也可以给出一个不支持的提示
　　var span = document.createElement("span");
　　span.style.color = 'red';
　　span.innerHTML = 'oops, your browser dones\'t support localStorage yet, :(';
　　document.getElementsByTagName('body')[0].appendChild(span);
}

ps: storage事件以file://打开无效，必须在服务器环境下才能成功

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

猜你喜欢