## 前言 作為本地存儲的方案，indexDb在瀏覽器支持的情況下能發揮比較重要的作用。那么就從各個方面分析下它存在的必要性。 ## 為什么需要 && 特性 ### 存儲大量數據 之前的cookie存儲只有不超過4KB，localStorage有2.5-10M左右，而indexDb一般來說不少于 250MB，甚至沒有上限。 **拓展**：那么我們什么情況下需要存儲大量數據呢？首先是你的應用場景需要大量數據的時候，具體可能分為以下的場景： 1 單條數據的請求比較耗時，解析比較耗時，那么建議針對這個數據進行前端存儲，然后使用時直接使用前端部分的即可。前提是這部分的數據能得到一個數據戳，能保證使用本地庫沒有問題。 2 多個接口請求的數據，在微服務大興的時候，前端往往需要請求多個接口才能完成一個完整功能的實現，那么這種情況下，使用本地數據庫具有明顯的優勢，比前端枚舉數據具有實時性，比請求多接口具有響應快的優勢 3 跨頁面存儲。雖然現在主流的框架具有vuex或者redux相關的技術，可以實現前端數據的內存管理，但是其不能較好的控制更復雜的數據，索引數據。所以在復雜數據共享方案上，這個能起到很好的作用。如果在跨頁面的方案中，能針對性的設置一些比較好的表和字段，是比單純的內存對象管理方式優化的。 4 本地緩存，離線緩存。在需要提升用戶體驗的時候，將必要的一些數據緩存到數據庫，可以提升用戶體驗，避免用戶完全無數據完全無法操作的糟糕體驗。 ### 鍵值對儲存 IndexedDB 內部采用對象倉庫（object store）存放數據。所有類型的數據都可以直接存入，包括 JavaScript 對象。對象倉庫中，數據以"鍵值對"的形式保存，每一個數據記錄都有對應的主鍵，主鍵是獨一無二的，不能有重復，否則會拋出一個錯誤。 **拓展：** 相比于原來的只能某個字段裝某個對象的情況，數據庫無疑具有更好的優勢，可以在查詢以及賦值時有更加的便利性。 ### 異步 IndexedDB 操作時不會鎖死瀏覽器，用戶依然可以進行其他操作，這與 LocalStorage 形成對比，后者的操作是同步的。異步設計是為了防止大量數據的讀寫，拖慢網頁的表現。 **拓展：** 還是大量數據的讀取，如果是localStorage會讓瀏覽器的其他行為中止，因為是同步的，影響用戶體驗。 ### 支持事務 IndexedDB 支持事務（transaction），這意味著一系列操作步驟之中，只要有一步失敗，整個事務就都取消，數據庫回滾到事務發生之前的狀態，不存在只改寫一部分數據的情況。 **拓展：** 避免中間步驟導致的數據操作從而造成的數據污染。 ### 同源限制 IndexedDB 受到同源限制，每一個數據庫對應創建它的域名。網頁只能訪問自身域名下的數據庫，而不能訪問跨域的數據庫。（這點與以前的方式相比，不算優勢，屬于必要的補充） ### 支持二進制儲存 IndexedDB 不僅可以儲存字符串，還可以儲存二進制數據（ArrayBuffer 對象和 Blob 對象） **拓展：** 可以很好的緩存用戶記錄，在不進行新的接口請求時，拿到用戶的操作記錄，尤其是歷史的表格、圖片等，能大幅度提升用戶體驗，降低后端壓力。 ## 參考教程 - [阮一峰indexDb入門教程](http://www.ruanyifeng.com/blog/2018/07/indexeddb.html)