月光魔力鸭
2018-10-27 11:33 阅读 2691 喜欢 1
在页面中不同的frame之间进行相互调用的话，我们可以通过frame获取对应的window然后进行调用，但是如果是浏览器不同的tab之间呢？
在这里，对通过localStorage实现不同tab之间的通信进行一个简单的封装和测试，准备用在项目中。
有这么一个需求（应该挺常见的），在A页面中，新窗口打开了B页面，当在B页面进行了某些操作后，想让A页面了解或做一些其他操作，当然通过frame的方式处理也是可行的，不过业务不能向技术妥协，所以针对这个问题，找了下相关资料，技术没有问题。
关于以上各个方案的资料都很多，最终我选择localStorage来实现，刚刚好还可以使用本地存储。（当然本地存储已经算是比较老的实现了，不过对于我这边的项目来说，很多“老”的东西都还没用上。）
对于localStorage来说，实际上就是一个浏览器的本地存储实现，他们的概念这里就不多说了，直接将我准备用他来做的事。
file://来打开是不可行的，需要通过服务器访问才可行。推荐anywhere-auth nodejs的模块直接创建文件服务器，更加方便。参考:https://www.chrunlee.cn/article/nodejs-tool-normal.html/****
*
* 用于多个tab页面之间的js通信，使用storage的技术。
* 要求：浏览器支持H5 storage属性，否则无法使用,同时，各大浏览器的隐身模式也不支持。
* @author :chrunlee
* 支持功能：1. 在缓存中存储数据和获得数据；2. 监听某key的数据发生改变并进行后续处理（监听类的不进行存储会实时的清空防止内存过大）
* 函数解析：看注释
* 使用注意：由于开发人员起名的随意，在使用listen和trigger的时候type上请增加模块名以及动作，尽量保证不重名，因为触发是全部系统所有页面的触发。
****/
byy.define(function( exports ){
if(!window.localStorage){
throw new Error('sorry ,this browser is not support H5 storage');
return;
}
var store = function(){
var maps = {};
/***
* _getStorage : 函数内私有函数，用于返回事件对象处理
* @params {String} type : listen中要监听的type
* @params {Function} callback : 回调函数，事件触发后调用
* @return {Function} eventHandler : 返回事件处理函数
***/
function _getStorage(type,callback){
var oldValue = null;//假定所有旧数据为null,每次不论设置什么数据，只要不是null,就可以触发
return function(e){
setTimeout(function(){
e = e || window.storageEvent;
var nowKey = e.key,
nowValue = e.newValue;
if(!nowKey){//如果不存在
//获得最新数据进行比对
var nv = localStorage.getItem(type);
if(oldValue != nv){
nowKey = type;
nowValue = nv;
}
}
if(nowKey == type && nowValue){
callback && callback(nowValue);
//使用完毕后，清空缓存数据
localStorage.removeItem(type);
}
},0)
}
}
//返回函数
return {
/***
* clearSession : 清空本页面的sessionStorage中的数据
* @params {String} name : 如果name为空，那么为清空所有，如果name有值，则清空该值的数据
* @return {Object} : 返回 byy.store 对象，可以继续进行操作
***/
clearSession : function( name ){
try{
name ? sessionStorage.removeItem(name) : sessionStorage.clear();
}catch(e){console.log(e)}
return this;
},
/***
* clearLocal : 清空该域名下的localStorage中的数据
* @params {String} name : 如果name为空，那么为清空所有，如果name有值，则清空该值的数据
* @return {Object} : 返回 byy.store 对象，可以继续进行操作
***/
clearLocal : function( name ){
try{
name ? localStorage.removeItem(name) : localStorage.clear();
}catch(e){console.log(e);}
return this;
},
/***
* session : 获得或设置sessionStorage中的数据
* @params {String} name : name 不能为空，必填；
* @params {Object} content : 如果content为空（null,undefined ）,那么该函数则返回sessionStorage中的name对应的值。如果content不为空，则设置name的值为content
* @return {Object} : 如果content不为空，则返回 byy.store 对象，可以继续进行操作。如果content为空，则返回name对应的值。
***/
session : function( name,content ){
if(content === null || content === undefined){
sessionStorage.setItem(name,byy.stringfy(content));
return this;
}else{
var msg = sessionStorage.getItem(name);
return byy.json(msg);
}
},
/***
* local : 获得或设置localStorage中的数据
* @params {String} name : name 不能为空，必填；
* @params {Object} content : 如果content为空（null,undefined ）,那么该函数则返回localStorage中的name对应的值。如果content不为空，则设置name的值为content
* @return {Object} : 如果content不为空，则返回 byy.store 对象，可以继续进行操作。如果content为空，则返回name对应的值。
* @notice : 在IE环境下，尽量不要使用listen中的type值进行存储，会触发listen的事件，并销毁数据。
***/
local : function( name,content ){
if(content){
localStorage.setItem(name,byy.stringfy(content));
return this;
}else{
var msg = localStorage.getItem(name);
return byy.json(msg);
}
},
/***
* trigger : 触发通过listen函数监听的type相关的事件
* @params {String} name : name 不能为空，必填；为想要触发的type
* @params {Object} msg : msg 为当触发事件的时候需要传递的数据，如果为空，则默认为type值。
* @return {Object} : 返回 byy.store 对象，可以继续进行操作
* @notice : trigger函数会在本页面以及其他所有监听type的页面进行触发事件，请谨慎处理。
***/
trigger : function( type,msg ){
localStorage.setItem(type,byy.stringfy(msg || type));
//由于谷歌等浏览器不会在本页面触发，在这里增加自定义派发事件
var event = document.createEvent('StorageEvent');
event.initStorageEvent('storage', false, false, type, null, msg, null, localStorage);
window.dispatchEvent(event);
return this;
},
/***
* listen : 监听localStorage的数据变化
* @params {String} type : 为要监听的key的值，监听后可以通过trigger触发
* @params {Function} fn : 当监听到触发的事件后，触发回调函数
* @return {Object} store : 返回 byy.store 对象，可以继续操作
* @notice : 如果要监听某事件，那么在起名字上有一定要注意。与模块业务相关联最好，且不要与真实要存储的key相同，否则会被销毁。
***/
listen : function( type,fn ){
//在listen这里处理
var device = byy.device();
if(device.ie){
var listener = _getStorage(type,fn);
setInterval(function(){
listener({});
},500);
}else{
if(document.attachEvent){
document.attachEvent('onstorage',_getStorage(type,fn));
}else{
window.addEventListener('storage',_getStorage(type,fn),false);
}
}
return this;
}
};
}
exports('store',store());
});
由于上面源码中使用了byy框架，所以如果单独拿来使用的话，需要剥离出来函数才行。
以下为在byy框架中的使用：
//引入
byy.require('store',function(){
//以下为使用
//1.设置sessionStorage
byy.store.session('test','test data');
//2.获得sessionStorage的数据
var data = byy.store.session('test');
//3.清空sessionStorage的数据
byy.store.clearSession('test');
//清空所有
byy.store.clearSession();
//4.localStorage同sessionStorage
byy.store.local('test','test data');
var data = byy.store.local('test');
byy.store.clearLocal('test');
byy.store.clearLocal();
//5.监听某事件（这里说明下：由于监听事件触发后会销毁相关的key,所以事件名字一定要起一个特定的）
byy.store.listen('modelTestEvent',function(msg){
console.log(msg);//获得触发的数据
});
//6.触发事件 - 通过local也可以触发
byy.store.trigger('modelTestEvent',{
name : 'test' //传递的数据
});
});
以上为store中相关的调用和使用方式。
以上为通过localStorage来实现浏览器多个tab之间进行通信的方案。仅供参考，如果有使用过程中出现的问题，可以直接联系我。
转载请注明出处: https://chrunlee.cn/article/js-browser-tab-localstorage.html
BUG集散地
