白話文解說 IndexedDB

瀏覽器有提供若干儲存資料的方法，不見得所有資料都必須存在後端的資料庫，其中較廣為人知或者較常使用的是 cookie, localStorage 這 2 種。

通常 IndexedDB 比較少會用到，因為多數情況都是交給後端伺服器幫忙處理就好，不過 IndexedDB 其實是瀏覽器所提供的 1 種 NoSQL storage, 支援 transactions 之外，還支援索引(index)，所以可以做到 range query, 甚至連資料庫版本都有考慮到，因此可以靠版本號做 data migration ，還頗強大的，幾乎可以認為 IndexedDB 是瀏覽器內建的輕量級資料庫。

IndexedDB 運用得當的話，可以在沒有後端支援的情況下，做到不少需要後端資料庫才能達成的功能，所以 IndexedDB 相當適合一些靜態網頁工具使用，可以把資料、工具設定值都存在瀏覽器內，變成就算使用者沒有註冊帳號或者沒有後端伺服器都還是能夠使用的網頁工具。

當然 IndexedDB 也不僅僅侷限在網頁工具一項用途之上， Youtube 其實也有使用 IndexedDB 存一些資料（至於具體內容是做什麼的，就有待研究才知道XD），可以打開網頁開發者工具查看。

IndexedDB 有個特點是每 1 個網域只能存取自己網域的 IndexedDB, 所以你無法用 JavaScript 在 A 網站存取 B 網站的 IndexedDB, 另外 IndexedDB 也有 databases 與 tables 的概念，每個網站可以有多個 IndexedDB databases, 每個 IndexedDB database 也可以有多個 tables 。

想玩看看 IndexedDB 的話，可以考慮閱讀一下 web.dev 所撰寫的 Working with IndexedDB 1 文，寫得蠻詳細的。

如果要運用到產品/服務之中的話，則推薦 Dexie.js 套件，該套件將 IndexedDB 的 API 包裝得很好， React, Vue, Angular 等生態系都有支援，而且文件也寫的十分詳細，品質保證！

以上就是 IndexedDB 的介紹。