cross-storage|cross-storage 浏览器 Web 跨域本地缓存 cross-storage浏览器Web跨域本地缓

背景：都是基于vue2.0开发的两个系统a和b，都有自己的登录页面，同一个账号可以在两个系统内登录，现要求，a登录成功后，可以直接跳到b的主页，b不需要登录。反过来，b从登录页登录后，也能跳到a的主页，a不需要登录。大家知道protocol（协议）、host（域名）、port（端口）有一个地方不同都会产生跨域现象，也被称为客户端同源策略。a和b两个系统域名和端口都不同，互相跳转共享token，这是不被允许的，于是就想用cross-storage解决。
步骤：1、a和b各种执行指令npm install cross-storage安装cross-storage。

2、a和b都创建一个Hub文件，路由文件里配上和login.vue同级别的路由。Hub内容如下![](/img/bVcW7aN)

//Hub.vue

配上需要共享token的域名或ip

3、a登录的时候用localstorage存下登录信息。b在mian的js里面先new一个crossStorage对象，然后在crossStorage的onConnect事件的回调里拿到a存贮的登录信息。如果每次都从onConnect回调里拿登录信息，速度比较慢，这里做了一个处理，在第一次拿到登录信息后，b也存到自己的localstorage里面，然后后面每次就从自己的localstorage里面取登录信息。这样就相当于b也登录了。反过来从b跳到a步骤也一样。 4、这里为了规范代码，我在项目里建了一个storage.js，在这个js里面定义取登录信息的方法。然后new对象和onConnect都放在这个方法里面,内容如下![](/img/bVcW7cz)，

// storage.js
import CrossStorage from 'cross-storage'
let host = window.location.host,httpData = https://www.it610.com/article/host.split(":"),protocol = window.location.protocol;
let portHttp = httpData?httpData[0]:'';
let portValue;
if(host.indexOf('192.168.1.245') >= 0){
portValue = https://www.it610.com/article/protocol+"//"+(portHttp ? portHttp+':9990':'');
}else if(host.indexOf('gas.deyt.cn') >= 0){
/正式环境/
portValue = https://www.it610.com/article/protocol+'//iot.deyt.cn';
}else{
/开发/
portValue = https://www.it610.com/article/protocol+"//"+(portHttp ? portHttp+':8081':'');
}
var storage
/获取Storage/
export const getStorage = function(name,callback) {
storage = new CrossStorage.CrossStorageClient(portValue+'/#/Hub',{

timeout: 10000,

});
return new Promise(function (resolve, reject) {

storage.onConnect().then(function () { return storage.get('infor'); }).then(function (res) { resolve(JSON.parse(res)); })['catch'](function (err) { reject(err); });

});
这个js里面不光可以定义取信息的方法，也可以定义存的方法，还有删除的方法.然后在mian.js里面引入这个方法，然后在对应的业务逻辑里面调用这个get方法。