上傳圖片後如何不依賴後端回顯？你可能需要indexedDB儲存技術
大家好，我是前端隊長Daotin，想要獲取更多前端精彩內容，關注我，解鎖前端成長新姿勢。
全文閱讀大概需要8分鐘，建議先收藏後看。
以下正文：
今天看到有人在群裡提問說，有一個業務場景，使用者上傳圖片後，圖片要回顯，不依賴後端，重新整理瀏覽器後也會顯示，我是存放在localStorage裡面，如果圖片超過5MB就超過最大儲存了，有沒有什麼辦法？
首先他這個問題讓我想到，在開發專案的時候的一些對於上傳圖片後，圖片回顯的操作，這裡我進行總結一下。
一、依賴後端的圖片回顯
一般都是在圖片上傳後（不清楚如果上傳圖片的可以參考這篇文章：前端如何上傳檔案），後端會給我們返回一個上傳成功後的圖片地址，然後我們用該地址替換到img標籤的src即可，這是常規操作。
二、不依賴後端，圖片一次性回顯
不依賴後端就是圖片上傳後，圖片的預覽不使用後端返回的圖片地址，而是前端通過上傳的圖片自己顯示。
圖片一次性回顯的意思是，在上傳成功後回顯，但是重新整理介面後，圖片就不顯示了，相當於只是臨時看看當時上傳的圖片。
這種方式操作很簡單，有兩種方式。
1、採用FileReader讀取base64格式的圖片
一般圖片上傳，我們會採用formData的形式上傳到伺服器。於是formData形式的資料，我們可以使用FileReader來讀取到base64格式的圖片進行顯示。
示例程式碼如下：
<body> <img src="" alt=""> <input type="file"> </body>
// js程式碼 var inputDom = document.querySelector('input'); var imgDom = document.querySelector('img'); inputDom.onchange = function () { // 建立一個formData物件，後期通過ajax上傳到伺服器 let formData = new FormData(); formData.append("iFile", this.files[0]); let file = formData.get('iFile'); console.log('==>', file); // 後期取到file檔案 let reader = new FileReader(); let fileType = file.type; // 呼叫reader進行讀取 reader.readAsDataURL(file); // reader讀取完成 reader.onload = function (e) { if(/^image\/[jpeg|png|gif]/.test(fileType)) { imgDom.src = e.target.result; } } }
下圖是img的src：
2、採用createObjectURL函式，使用物件URL顯示圖片
createObjectURL函式可以建立一個引用任何資料的簡單URL字串。然後用這個url作為img的src即可進行圖片回顯。
程式碼很簡單，如下：
var inputDom = document.querySelector('input');
var imgDom = document.querySelector('img');
inputDom.onchange = function () {
// 建立一個本地file檔案的臨時url
var objectURL = window.URL.createObjectURL(this.files[0]);
console.log(src);
imgDom.src = src;
}
下圖是img的src：
參考連結：
三、不依賴後端，圖片永久回顯
圖片永久回顯就是頁面重新整理後，圖片依然回顯。
目前可以採用的方式為localStorage儲存在本地，但是如果圖片資料過大（大於10M，目前瀏覽器localStorage 在 2.5MB 到 10MB 之間），那麼就需要一種新的解決方案，那就是本文的主角：indexedDB。
通俗地說，IndexedDB 就是瀏覽器提供的本地資料庫，它可以被網頁尾本建立和操作。IndexedDB 允許儲存大量資料，提供查詢介面，還能建立索引。這些都是 localStorage 所不具備的。
在IndexedDB之前，還有個WebSQL 資料庫，但是W3C組織在2010年11月18日廢棄了webSql。儘管兩者都是儲存的解決方案，但是他們提供的不是同樣的功能。IndexedDB 和WebSQL的不同點在於WebSQL 是關係型資料庫訪問系統，IndexedDB 是索引表系統(key-value型)。
至於為什麼會被廢棄，可以參考這篇文章：HTML5 indexedDB前端本地儲存資料庫例項教程
IndexedDB 基本用法
IndexedDB的基本操作可以參考阮一峰老師寫的：瀏覽器資料庫 IndexedDB 入門教程，非常詳細，這裡我就不必在重複一遍了。
阮一峰老師寫的IndexedDB 操作教程都是基於原生IndexedDB API進行操作的，有時候是比較繁瑣的，那有沒有一些成熟的封裝好的js庫供我們使用呢？
答案當然是有的，還不少呢，有了這些封裝庫，我們可以更快更簡單進行IndexedDB的操作。
indexedDB 相容性
基本上IE10+都支援。https://caniuse.com/?search=indexedDB
IndexedDB 封裝庫推薦
1、localForage （19K star）
localForage是一個快速，簡單的JavaScript儲存庫。 localForage通過使用簡單的類似於localStorage的API使用非同步儲存（IndexedDB或WebSQL）來改善Web應用程式的離線體驗。localForage在不支援IndexedDB或WebSQL的瀏覽器中會自動使用localStorage。
Github地址：https://github.com/localForage/localForage
2、PouchDB（14.1K star）
PouchDB是一個受Apache CouchDB啟發的開源JavaScript資料庫，旨在在瀏覽器中良好執行。
PouchDB的建立是為了幫助Web開發人員構建離線工作以及線上工作的應用程式。
它使應用程式可以在離線時在本地儲存資料，然後在應用程式重新聯機時將其與CouchDB和相容伺服器同步，從而使使用者的資料無論在下次登入時都保持同步。
（感覺像是線上辦公軟體的臨時離線場景，不適用於本節意義上的純離線場景）
Github地址：https://github.com/pouchdb/pouchdb
3、Dexie.js（6.6K star）
Dexie.js是indexedDB的封裝庫。
Github地址：https://github.com/dfahlander/Dexie.js
4、idb（3.7K star）
這是一個很小的庫（大約1.09k），主要反映了IndexedDB API，但是有一些小的改進，對可用性產生了很大的影響。
Github地址：https://github.com/jakearchibald/idb
（完）
想看更多精彩內容，關注我獲取更多前端技術與個人成長相關內容，我相信有趣的人終會相遇！
聽說點讚的人，一個月後都會運氣爆棚，升職加薪哦~