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?
网友评论