关于javascript:crossstorage-浏览器-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
<template>
<div id=”hub”></div>
</template>

<script>
import CrossStorage from ‘cross-storage’;
let CrossStorageHub = CrossStorage.CrossStorageHub;
CrossStorageHub.init([

{origin: /.*119.3.93.*?$/, allow: ['get', 'set']},
{origin: /.*192.168.1.*?$/, allow: ['get', 'set']},
{origin: /.*gas.deyt.cn(:[1-9]\d*)?$/, allow: ['get', 'set']},
{origin: /.*iot.deyt.cn(:[1-9]\d*)?$/, allow: ['get', 'set']},

]);
export default{
}
</script>
配上须要共享 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 = host.split(“:”),protocol = window.location.protocol;
let portHttp = httpData?httpData[0]:”;
let portValue;
if(host.indexOf(‘192.168.1.245’) >= 0){
portValue = protocol+”//”+(portHttp ? portHttp+’:9990′:”);

}else if(host.indexOf(‘gas.deyt.cn’) >= 0){
/正式环境 /
portValue = protocol+’//iot.deyt.cn’;
}else{
/ 开发 /
portValue = 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 办法。

  5、须要留神一点 localstorage 只能存入字符串，所以登录信息如果是对象的时候用 JSON.stringify()解决一下再存。取的时候用 JSON.parse（）解决一下。

原理：通过 window.postMessage() api 跨域个性，再配合一个“直达页面”，来实现所谓的“跨域存储”。