大家好，我是前端隊長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
（完）
想看更多精彩內容，關注我獲取更多前端技術與個人成長相關內容，我相信有趣的人終會相遇！
聽說點讚的人，一個月後都會運氣爆棚，升職加薪哦~
