举荐一个最近写的工具 @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-messageimport 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