溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在使用localstorage代替cookie實現(xiàn)跨域共享數(shù)據(jù)，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
一，背景
因為網(wǎng)站系統(tǒng)的日益龐大，不同域名業(yè)務(wù)，甚至不同合作方網(wǎng)站的cookie可能或多或少需要進行共享使用，遇到這個情況的時候，大家一般想到的是使用登錄中心分發(fā)cookie狀態(tài)再進行同步進行解決，成本較高而且實施起來比較復(fù)雜和麻煩。
因為cookie在跨域的情況下，瀏覽器根本不允許互相訪問的限制，為了突破這個限制，所以有了以下這個實現(xiàn)方案，使用postmessage和localstorage進行數(shù)據(jù)跨域共享。
二，API設(shè)計
背景中說過我們使用localstorage來代替cookie，本身localstorage和cookie就有一些使用上的區(qū)別，比如localstorage的容量更大，但是不存在過期時間，雖然容量大，但在不同的瀏覽器上也都有空間上限，操作不好很容易崩潰，還有就是postmessage雖然支持跨域，安全問題和api的異步化也給使用帶來了一些麻煩，我們?nèi)绾伟堰@個模塊設(shè)計的更易用呢？
先看下我設(shè)計的API：
import { crosData } from 'base-tools-crossDomainData';
var store = new crosData({
iframeUrl:"somefile.html", //共享iframe地址，iframe有特殊要求，詳見模板文件
expire:'d,h,s' //單位天，小時，秒 默認過期時間，也可以種的時候覆蓋
});
store.set('key','val',{
expire:'d,h,s' //option 可帶過期時間，覆蓋expire
}).then((data)=>{
//異步方法，如果種失敗，會進入catch事件
//data {val:'val',key:'key',domain:'domain'};
}).catch((err)=>{
console.log(err);
});
store.get('key',{
domain:'(.*).sina.cn' //可以指定域名，也可以使用(.*)來匹配正則字符串，返回的val信息會帶著domain信息,不填寫則返回本域的
}).then((vals)=>{
console.log(val) //異步獲取存儲數(shù)據(jù),可能多個，是個數(shù)組 [{},{}]
}).catch((err)=>{
});
store.clear('key').then().catch(); //只清楚當(dāng)前域下的key,不允許清除其他域下的key，只能讀一個模塊上手快不快主要看api，所以對于一個數(shù)據(jù)共享模塊，我認為支持set，get，clear這3個方法就ok了，因為postmessage本身是個一來一回的異步的行為，包裝成promise的肯定更為合適和易用。因為localstorage不支持過期時間，所以需要一個全局的過期時間配置，當(dāng)然也可以在set的時候進行單獨配置，而get的時候我們可以指定獲取某個域下的數(shù)據(jù)或者多個域下的數(shù)據(jù)，因為key名可能重復(fù)，但是域只有一個。這里就牽扯到了數(shù)據(jù)的管理，后邊單獨來說，最后clear和set的api只能種本域的數(shù)據(jù)，不可以操作其他域下的數(shù)據(jù)，get被允許。
下面我們看一下，client端的設(shè)置和API：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>crosData</title>
</head>
<body>
<script>
window.CROS = {
domain:/(.*).sina.cn/, //或者你允許的域名,支持正則和*通配符
lz:false //是否開啟lz壓縮val字符
};
</script>
<script src="http://cdn/sdk.js"></script>
</body>
</html>你可以靈活在任何一個域下的一個html文檔中，引入client的js sdk，然后通過全局屬性的方式配置一個你允許被種到這個文檔所在域下的domain白名單，支持正則，然后lz是是否啟動lz-string壓縮，至于什么是lz壓縮后邊我再介紹。
到這里，一個比較通用的API設(shè)計就完成了，下面我們看一下實現(xiàn)原理和具體的一些問題。
三，實現(xiàn)原理
說起來好想蠻簡單的，但是寫起來其實并不是，我們首先需要知道postMessage怎么用，這個屬于很常見的一個API了，他有一個要點這里告訴大家，就是postMessage只能在iframe中或者使用window.open這種開啟新頁面的方式進行互相通訊，當(dāng)然這里我們首先就要創(chuàng)建一個隱藏的iframe，進行跨域。
懶得拿工具畫圖了，因為流程比較清晰，這里拿文字復(fù)述一下整個通訊流程，首先父頁面創(chuàng)建一個隱藏的iframe，然后當(dāng)執(zhí)行set，get，clear等command的時候，通過postMessage來進行消息廣播，子頁面接收到消息后，解析命令，數(shù)據(jù)和回調(diào)id（postMessage無法傳遞函數(shù)和引用，兼容問題導(dǎo)致，最好只傳string類型，所以還需要對data做stringify）。然后當(dāng)子頁面處理完localstorage的操作后，再通過postMessage把對應(yīng)的cbid和data返回給父頁面，父頁面監(jiān)聽message事件，處理結(jié)果。
四，編碼
嗯，所以說沒幾行，我們下面開始進行編碼了：
首先介紹一下我們用到的第三方包都有什么，為什么要用：
1，url-parse 對url進行parse解析，主要用他里面的origin屬性，因為postMessage本身對origin就有嚴格的驗證，我們要支持白名單和域名管理也需要。
2，ms 對時間簡寫做毫秒轉(zhuǎn)換的工具庫。
3， lz-string 對字符串做壓縮用的工具包，這里給大家科普一下LZ壓縮算法，首先了解LZ需要先了解RLZ，Run Length Encoding ，是一個針對無損壓縮的非常簡單的算法。它用重復(fù)字節(jié)和重復(fù)的次數(shù)來簡單描述來代替重復(fù)的字節(jié)。LZ 壓縮算法的背后是使用 RLE 算法用先前出現(xiàn)的相同字節(jié)序列的引用來替代。簡單的講， LZ 算法被認為是字符串匹配的算法。例如：在一段文本中某字符串經(jīng)常出現(xiàn)，并且可以通過前面文本中出現(xiàn)的字符串指針來表示。
lz-string本身有優(yōu)勢就是可以大大的減小你的儲存量，本身5MB的localstorage如果用來支持多域名的數(shù)據(jù)保存，很快就會被壓縮用完，但是lz-string本身比較慢，消耗比較大，大家平時在工作中如果對傳輸數(shù)據(jù)量有大小要求的話可以嘗試使用這個壓縮算法來優(yōu)化字符串長度，默認是不開啟的。
4，store2 本身localstorage的api比較簡陋，為了減少代碼邏輯復(fù)雜度，這里選了一個比較流行的localstorage的實現(xiàn)庫來進行store的操作。
說完了第三方包我們下面看一下父頁面的js怎么來寫：
class crosData {
constructor(options) {
supportCheck();
this.options = Object.assign({
iframeUrl: '',
expire: '30d'
}, options);
this.cid = 0;
this.cbs = {};
this.iframeBeforeFuns = [];
this.parent = window;
this.origin = new url(this.options.iframeUrl).origin;
this.createIframe(this.options.iframeUrl);
addEvent(this.parent, 'message', (evt) => {
var data = JSON.parse(evt.data);
var origin = evt.origin || evt.originalEvent.origin;
//我只接收我打開的這個iframe的message，其他的都是不合法的，直接報錯
if (origin !== this.origin) {
reject('illegal origin!');
return;
}
if (data.err) {
this.cbs[data.cbid].reject(data.err);
} else {
this.cbs[data.cbid].resolve(data.ret);
}
delete this.cbs[data.cbid];
});
}
createIframe(url) {
addEvent(document, 'domready', () => {
var frame = document.createElement('iframe');
frame.style.cssText = 'width:1px;height:1px;border:0;position:absolute;left:-9999px;top:-9999px;';
frame.setAttribute('src', url);
frame.onload = () => {
this.child = frame.contentWindow;
this.iframeBeforeFuns.forEach(item => item());
}
document.body.appendChild(frame);
});
}
postHandle(type, args) {
return new Promise((resolve, reject) => {
var cbid = this.cid;
var message = {
cbid: cbid,
origin: new url(location.href).origin,
action: type,
args: args
}
this.child.postMessage(JSON.stringify(message), this.origin);
this.cbs[cbid] = {
resolve,
reject
}
this.cid++;
});
}
send(type, args) {
return new Promise(resolve => {
if (this.child) {
return this.postHandle(type, args).then(resolve);
} else {
var self = this;
this.iframeBeforeFuns.push(function() {
self.postHandle(type, args).then(resolve);
});
}
})
}
set(key, val, options) {
options = Object.assign({
expire: ms(this.options.expire)
}, options);
return this.send('set', [key, val, options]);
}
get(key, options) {
options = Object.assign({
domain: new url(location.href).origin
}, options);
return this.send('get', [key, options]);
}
clear(key) {
return this.send('clear', [key]);
}
}大概方法就這么幾個，這里有幾個關(guān)鍵點，我說一下。
1，get，set，clear方法都是統(tǒng)一的調(diào)用的send方法，只不過對options部分做了補齊。
2，send方法返回一個promise對象，如果iframe已經(jīng)onload成功，則直接調(diào)用postHandle方法進行postMessage操作，如果iframe還在加載中，則把當(dāng)前的操作推到iframeBeforeFuns數(shù)組中，用函數(shù)包裹，等待iframe onload結(jié)束后統(tǒng)一調(diào)用，函數(shù)包裹的也是postHandle方法。
3，postHandle方法，在發(fā)送請求前包裝data，生成cbid，origin，action和args，cbs對象保存了每個cbid下的resolve和reject，等待子頁面的postMessage返回后處理。因為postMessage不能保留引用，不能傳函數(shù)，所以這里選擇這個方法來進行關(guān)聯(lián)。
4，constructor比較好理解，當(dāng)這個類被初始化的時候，我們定義了我們需要的一些options的屬性，創(chuàng)建iframe，然后監(jiān)聽message事件，處理子頁面返回的消息。
5，在父頁面的message事件中，我們要校驗，給我發(fā)消息的必須是我打開的這個窗口iframe，否則報錯，然后根據(jù)data中的err標(biāo)識來讓cbs中的resolve和reject進行執(zhí)行。
6，createIframe方法中，iframe onload中的回調(diào)處理創(chuàng)建前 緩存的調(diào)用方法，這里注意使用了domready，因為可能body還沒解析就會進行sdk的執(zhí)行。
下面是child部分的代碼：
class iframe {
set(key, val, options, origin) {
//檢查val大小，不能超過20k.
val = val.toString();
val = this.lz ? lzstring.compressToUTF16(val) : val;
var valsize = sizeof(val, 'utf16'); //localStorage 儲存使用utf16編碼計算字節(jié)
if (valsize > this.maxsize) {
return {
err: 'your store value : "' + valstr + '" size is ' + valsize + 'b, maxsize :' + this.maxsize + 'b , use utf16'
}
}
key = `${this.prefix}_${key},${new url(origin).origin}`;
var data = {
val: val,
lasttime: Date.now(),
expire: Date.now() + options.expire
};
store.set(key, data);
//大于最大儲存?zhèn)€數(shù)，刪除最后一次更新的
if (store.size() > this.storemax) {
var keys = store.keys();
keys = keys.sort((a, b) => {
var item1 = store.get(a),
item2 = store.get(b);
return item2.lasttime - item1.lasttime;
});
var removesize = Math.abs(this.storemax - store.size());
while (removesize) {
store.remove(keys.pop());
removesize--;
}
}
return {
ret: data
}
}
get(key, options) {
var message = {};
var keys = store.keys();
var regexp = new RegExp('^' + this.prefix + '_' + key + ',' + options.domain + '$');
message.ret = keys.filter((key) => {
return regexp.test(key);
}).map((storeKey) => {
var data = store.get(storeKey);
data.key = key;
data.domain = storeKey.split(',')[1];
if (data.expire < Date.now()) {
store.remove(storeKey);
return undefined;
} else {
//更新lasttime;
store.set(storeKey, {
val: data.val,
lasttime: Date.now(),
expire: data.expire
});
}
data.val = this.lz ? lzstring.decompressFromUTF16(data.val) : data.val;
return data;
}).filter(item => {
return !!item; //過濾undefined
});
return message;
}
clear(key, origin) {
store.remove(`${this.prefix}_${key},${origin}`);
return {};
}
clearOtherKey() {
//刪除不合法的key
var keys = store.keys();
var keyReg = new RegExp('^' + this.prefix);
keys.forEach(key => {
if (!keyReg.test(key)) {
store.remove(key);
}
});
}
constructor(safeDomain, lz) {
supportCheck();
this.safeDomain = safeDomain || /.*/;
this.prefix = '_cros';
this.clearOtherKey();
if (Object.prototype.toString.call(this.safeDomain) !== '[object RegExp]') {
throw new Error('safeDomain must be regexp');
}
this.lz = lz;
this.storemax = 100;
this.maxsize = 20 * 1024; //字節(jié)
addEvent(window, 'message', (evt) => {
var data = JSON.parse(evt.data);
var originHostName = new url(evt.origin).hostname;
var origin = evt.origin,
action = data.action,
cbid = data.cbid,
args = data.args;
//合法的廣播
if (evt.origin === data.origin && this.safeDomain.test(originHostName)) {
args.push(origin);
var whiteAction = ['set', 'get', 'clear'];
if (whiteAction.indexOf(action) > -1) {
var message = this[action].apply(this, args);
message.cbid = cbid;
window.top.postMessage(JSON.stringify(message), origin);
}
} else {
window.top.postMessage(JSON.stringify({
cbid: cbid,
err: 'Illegal domain'
}), origin);
}
});
}
}代碼也不多，這里簡單說一下各個方法的用處和組織關(guān)系：
1，constructor部分，上面的類里也進行瀏覽器特性支持檢查，然后定義了store的prefix值，最大個數(shù)和每一個key的maxsize等屬性。然后我們創(chuàng)建message通道，等待父頁面調(diào)用。
2，在message中，我們對發(fā)送廣播的origin進行檢查，然后對調(diào)用的方法進行檢查，調(diào)用對應(yīng)的set，get，clear方法，然后把執(zhí)行的結(jié)果拿到，綁定cbid，最后再postMessage發(fā)送回父頁面。
3，clearOtherKey 刪除不合法的一些store數(shù)據(jù)，只保留符合格式的數(shù)據(jù)。
4，set方法中對每一條的數(shù)據(jù)做size校驗，lz壓縮，保存的data中包含了val，key，過期時間以及更新時間（用于LRU計算）。
5，set方法中，如果儲存的ls個數(shù)超過了最大限制，這個時候需要進行刪除操作， LRU是Least Recently Used的縮寫，即最近最少使用。我們通過遍歷所有的key值，對key值做一個排序，通過lasttime，然后進行keys數(shù)組的pop操作，拿到堆棧尾部的需要被清除的key，然后逐個刪除。
6，get方法中，我們通過遍歷所有的key值，匹配到我們需要拿到的domain的域的key，然后把返回值中的key進行拆解（我們儲存時是 key,domain的格式），因為api要求返回多個符合的值，我們對過期的數(shù)據(jù)最后再做一個filter，然后使用lz解壓縮val值，保證用戶拿到的是正確結(jié)果。
以上就是我們的一個整體實現(xiàn)編碼過程和review，下面說一說遇到的坑。
五，一些遇到的坑
因為上面只給了主代碼，并不是完整代碼，因為本身邏輯比較清晰，花一點時間都可以寫出來的。下面說說有什么坑的地方。
1，計算localstorage的儲存值。
因為我們都知道有5MB的限制，所以每一條數(shù)據(jù)最大要求不能超過20*1024 字節(jié)，對于字節(jié)的計算，localstorage要使用utf16的編碼進行轉(zhuǎn)換，參考這篇文章： JS計算字符串所占字節(jié)數(shù)
2，兼容性
ie8下postMessage最好都傳字符串，事件需要抹平處理，JSON需要抹平處理。
3，創(chuàng)建iframe時的異步處理
這里之前做了個一個setTimeout的遞歸等待，后來更改成了上面的實現(xiàn)方法，通過onload后統(tǒng)一處理promise的reslove，保證promise api的統(tǒng)一。
4，數(shù)據(jù)保存時，空間復(fù)雜度 vs 時間復(fù)雜度。
第一個版本并不是上面的實現(xiàn)，我實現(xiàn)了3個版本：
第一個版本是保存了一個LRU的數(shù)組，為了減少時間復(fù)雜度，但是浪費了空間復(fù)雜度，而且經(jīng)過測試，store的get方法耗時比較大，主要是parse的耗時。
第二個版本，為了能讓lz-string壓縮率最大化，我把所有的數(shù)據(jù)包括LRU數(shù)組保存到了一個key值上，導(dǎo)致數(shù)據(jù)多的時候lz-string和getItem，parse時間消耗非常大，雖然計算的時間復(fù)雜度是最低。
最后一個版本，就是上面的，我犧牲了一些時間復(fù)雜度和空間復(fù)雜度，但是因為瓶頸在于set和get的讀寫速度，單個的保存讀寫速度極快，獲取keys的方法因為底層是用的for in localstorage實現(xiàn)的，性能還是很不錯的，20kb存滿100條，讀寫也在1s左右，性能非常不錯。
六，總結(jié)和對比
模塊寫完了，我才知道原來還有這么一個庫： zendesk/cross-storage
但是我查看了他的api和源代碼，對比了一下實現(xiàn)方法，我覺得還是我這個版本考慮的比較多。
1，我的版本對域名和數(shù)據(jù)的管理有控制。
2，我的版本promise api更簡化，比它少一個onConnect，可以參考他的實現(xiàn)，比我寫的多多了，也沒解決這個iframe等待異步的問題。
3，不支持lz壓縮數(shù)據(jù)。
4，不支持LRU的儲存池管理，所以可能存多了造成寫不進的問題。
5，他貌似每次交互都搞一個iframe，太浪費dom操作和廣播了，我覺得一直開著并沒有什么問題，當(dāng)然他可能有需求連接多個client才這么處理的。
關(guān)于怎么在使用localstorage代替cookie實現(xiàn)跨域共享數(shù)據(jù)就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼