浏览器标签页之间通讯之 -- 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