瀏覽器標籤頁之間通訊之 -- Localstorage+IndexedDB

推薦一個最近寫的工具 @lllllxt/storage-idb-message，用於同源下瀏覽器標籤之間的通信, 相比純用Localstorage作通信，這個插件能夠傳遞更大的數據。

文檔:

storage-idb-message

基於 LocalStorage + IndexedDB 封裝的消息傳遞的模塊，在同源(不跨域)的前提下，用於同一頁面多個 iframe、跨 tab 頁面、移動端不一樣 webview 頁面之間的消息傳遞

作這玩意的初衷

原本我是隻用 LocalStorage 作消息傳遞的， 但後來某次在 Chrome 上傳遞的數據>5M 致使數據丟失，因而乎就有了用 LocalStorage 作指令，IndexedDB 作數據存儲這個想法了

參考：

LocalStorage 儲存空間在 2.5MB 到 10MB 之間（各家瀏覽器不一樣），而 IndexedDB 比 LocalStorage 大得多，通常來講很多於 250MB，甚至沒有上限。

經過 npm 安裝

npm i @lllllxt/storage-idb-message

import StorageIdbMessage from '@lllllxt/storage-idb-message'

const StorageIdbMessage = request('@lllllxt/storage-idb-message')

const _SIM = new StorageIdbMessage(opts: Opts)

// 監聽指令
_SIM.response = (orderName, data) => {
    console.log(orderName, data)
})

// 發送指令
_SIM.send(YourOrder, AnyData)

經過<script>標籤引用

storage-idb-message.min.js

此方法是向 window 對象中註冊一個 StorageIdbMessage 對象

參數(Opts)

參數	描述
storageKey	指令的 LocalStorage key 名稱
clearIdb	默認 true，是否在 response 後清除 IndexedDB 的數據
force	默認 false，調用 clearCache 清除緩存

方法

方法	描述
send(order: String, data: any)	發送
response(order: String, data: any)	響應其餘頁面傳過來的指令

靜態方法

方法	描述
clearCache(successFn?: Function, errFn?: Function)	清除 indexedDB 緩存

BTW ------------------------------------

因爲開發初衷是爲了在vue工程上使用, 因而同時也寫了基於這個工具開發的vue插件 @lllllxt/vue-storage-idb-message