大象装进冰箱--本地存储与浏览器端indexDB存储间的转换

---

http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

1. 打开数据库 const indexDB=window.indexDB||

第一次打开数据库时，会先触发upgradeneeded事件，然后触发success事件。

---

onupgradeneeded事件会调用createObjectStore方法，创建一个对象仓库名为“elephants”

调用success方法 调用 getImageFile();方法

---

创建一个XMLHttpRequest对象

1.xhr发出请求，设置相应类型为二进制流文件 

2给当前请求增加一个监听事件，事件类型是加载，指出加载时触发

3send（）发出xhr请求

相应的结果xhr.response为blob类型的二进制文件

---

---

调用putElephantInDb方法向数据库elephantFiles的对象仓库elephants中添加键为image值为blob的一行记录，这就完成了向浏览器端存储数据（大象图片）的 任务

IDBTransaction 对象用来异步操作数据库事务，所有的读写操作都要通过这个对象进行。IDBDatabase.transaction()方法返回的就是一个 IDBTransaction 对象。var db;var DBOpenRequest = window.indexedDB.open('demo', 1);DBOpenRequest.onsuccess = function(event) { db = DBOpenRequest.result; var transaction = db.transaction(['demo'], 'readwrite'); transaction.oncomplete = function (event) { console.log('transaction success'); }; transaction.onerror = function (event) { console.log('tansaction error: ' + transaction.error); }; var objectStore = transaction.objectStore('demo'); var objectStoreRequest = objectStore.add({ foo: 1 }); objectStoreRequest.onsuccess = function (event) { console.log('add data success'); };};

---

使用window.url创建URL对象

const URL const URL=window.URL||window.webkitURL; const imgURL=URL.createObjectURL(ImgFile);=window.URL||window.webkitURL; const imgURL=URL.createObjectURL(ImgFile);

---

下面是imgURL的值

---

打开冰箱 ---------xmlhttprequest 得到本地图片发送请求获取响应地址 请求完调用装进冰箱的方法 即下面的putelephantInDb()

把大象装进冰箱-------向indexDB里添加数据即blob

关冰箱-----------get请求成功以后把本地图片显示在浏览器

最终效果

---

应该可以在hxr请求中直接完成存储并显示的？

图片的格式 blob base64？

本地URL window.URL?