白話文解說 IndexedDB

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

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

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

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

indexeddb.png

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 的介紹。

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

追蹤新知

看完這篇文章了嗎?還意猶未盡的話,追蹤粉絲專頁吧!

我們每天至少分享 1 篇文章/新聞或者實用的軟體/工具,讓你輕鬆增廣見聞提升專業能力!如果你喜歡我們的文章,或是想了解更多特定主題的教學,歡迎到我們的粉絲專頁按讚、留言讓我們知道。你的鼓勵,是我們的原力!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!