众多跨标签页通信方式，你知道哪些？（二）

书接上回，由于时间原因，还有几种情况没有总结，今天抽时间总结一下，其他情况请查看这里，众多跨标签页通信方式，你知道哪些？

以下则是常用的通信方法

BroadCast Channel
Service Worker
LocalStorage + window.onstorage 监听
Shared Worker 定时器轮询（setInterval）
IndexedDB 定时器轮询（setInterval）
cookie 定时器轮询（setInterval）
window.open + window.postMessage(非同源也可)
Websocket (非同源也可)

IndexedDB 定时器轮询（setInterval）

IndexedDB是一种底层的API，用于在客户端存储大量的结构化数据。
它是一种事务型数据库系统，是一种基于JavaScript面向对象数据库，有点类似于NoSQL（非关系型数据库）。
IndexDB本身就是基于事务的，我们只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务即可。

下面就简单演示先通信的过程，就是在两个同源页面进行获取数据。

js 复制代码

// 页面一
<button>新增</button>
<button>查询</button>
<button>删除</button>
<button>修改</button>
<script src="db.js"></script>

js 复制代码

// 页面二
<script>
    function openDB() {
      return new Promise((resolve,reject) => {
        const dbRequest = indexedDB.open("zhDB", 3)
        let db = null
        dbRequest.onsuccess = function(event) {
          db = event.target.result
          resolve(db)
        }
      })
    }
    const getAllData = async (db) => {
      return new Promise((resolve, reject) => {
        const transaction = db.transaction("users", "readwrite")
        const store = transaction.objectStore("users")
        const res = store.getAll()
        res.onerror = () => {
          reject([])
        }

        res.onsuccess = () => {
          resolve(res.result)
        }
      })
    }

    let infoData = []
    openDB().then(db => {
      setInterval(async () => { 
        const data = await getAllData(db)
        if(infoData.length !== data.length) {
          infoData = data
          console.log("infoData", infoData)
        }
      }, 1000)
    })
</script>