indexedDB---掌握浏览器内建数据库的根本用法
1.认识indexedDBIndexedDB 是一个浏览器内建的数据库，它可以存放对象格式的数据，类似本地存储localstore，但是相比localStore 10MB的存储量，indexedDB可存储的数据量远凌驾这个数值，具体是多少呢？
默认情况下，浏览器会将自身地点的硬盘位置剩余容量全部作为indexedDB的存储容量，
https://img-blog.csdnimg.cn/direct/da5858945a9a44c5adb8cd071c9d5385.pnghttps://img-blog.csdnimg.cn/direct/ff1b4e8e38314b46b7ddd5d0b6b14dc8.png
这里差不多就对应这c盘的剩余容量，以是indexDB有第一个特点，容量大；
存储的格式，以对象的键值情势存储数据，注意这里的 id 是一个唯一的索引属性，
https://img-blog.csdnimg.cn/direct/1951d89d71794cd6aa0f44fdf28f9008.png
在indexedDB中，必要有一个唯一的标识符来区分存储的内容，这里使用的是id，这表示，存储的每一个值内都必要一个唯一的id值，这是第二个特点，同一的唯一标识符（key），
最后它接纳的是，对象存储库和存储表的数据存放方式；你可以明白成，indexedDB是一个大的数据对象（object），它内部包含了很多数据库（object），每个数据库内又有很多存储对象表（array），每个表内又有很多键值对（object），
https://img-blog.csdnimg.cn/direct/dd3f0948b85441ed9f60038aa4f63c82.pnghttps://img-blog.csdnimg.cn/direct/6fe0eca1e1db47439b87f73decb4e4c9.png
在indexedDB中，有很多上面的这种存储库对象，可以看出这是一个树形布局，根节点就是indexedDB
以是，总结一下，indexedDB：
[*]容量大
[*]有唯一标识符（key）
[*]树形布局的对象存储
[*]和localStore一样同一个域名下的indexedDB是同等的，否则不同等，每个网页都有各自的indexedDB（补充）
2.indexedDB数据库的使用
查察indexedDB
我们可以在开发者工具中直接查察indexedDB数据库，也可以在控制台打印出来，indexedDB是window对象下的一个属性，
// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB https://img-blog.csdnimg.cn/direct/6600f1636d8c469594b46d290e35c0f5.png
打开数据库
const request = indexedDB.open(name, version);
name —— 字符串，即数据库名称。
version —— 一个正整数版本，默认为 1。
返回 openRequest 对象 注意：数据库的干系操作都是异步的，打开、读取和编辑、删除，都必要时间处理，并不是马上执行结束，以是每一个对数据库的干系操作都有回调变乱进行监听，
[*]success：打开成功，数据库准备就绪 ，request.result 中有了一个数据库对象“Database Object”，这就是一个数据库，我们可以通过它访问这个库的所有数据
[*]error：打开失败。
[*]upgradeneeded：更新版本，当数据库的版本更新时触发，比方，1->2。
这里表明一下版本号，一个 数据库在打开时，若没有这个库，则会新建，默认版本号为1；若有，打开时的版本号比原本生存的版本号更高，则会更新这个库，同时触发upgradeneeded变乱，一个数据库的版本号只会越来越高，不会出现还原旧版本的情况，这是因为有些特定的操作只能在版本更新时执行（upgradeneeded变乱）--- 比方，新建、编辑、删除一个对象存储表
// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB// 打开数据库const request = indexedDB.open('myDatabase', 1);request.onerror = function(event) {console.error('数据库打开报错');}request.onupgradeneeded = function(event) {const db = event.target.result;console.log('数据库必要升级');// 创建一个对象存储空间}request.onsuccess = function(event) {const db = event.target.result;console.log('数据库打开成功');} https://img-blog.csdnimg.cn/direct/4bd3998c338e47cda7d42ddc28ddec96.pnghttps://img-blog.csdnimg.cn/direct/7e18fd6fb8c44511837625a99ec8c529.png
新建了一个myDatabase数据库，触发 了一次版本更新，在次执行时版本还是1就不会触发更新升级的变乱，
https://img-blog.csdnimg.cn/direct/898cb5c5382e4859b0cdee0b75bdc926.png
如许就成功新建、打开了一个数据库，
新建一个对象存储表
db.createObjectStore(name[, keyOptions]);
name 是存储区名称，例如 "books" 表示书。
keyOptions 是具有以下两个属性之一的可选对象：
keyPath —— 对象属性的路径，IndexedDB 将以此路径作为键，例如 id。
autoIncrement —— 如果为 true，则自动生成新存储的对象的键，键是一个不断递增的数字。
[*] name：储存表的名称
[*]keyOptions: 设置对象，
[*]keyPath: 储存数据的标识符
[*]autoIncrement：默认为false，若为true，则会自动在储存的对象上添加标识符属性，并附上一个自增的正数值（1，2，3，4......）
要操作对象存储表就必要更新版本号，这个createObjectStore方法只能在更新变乱内使用，否则将产生错误
// 打开数据库
const request = indexedDB.open('myDatabase', 2);
request.onupgradeneeded = function(event) {
const db = event.target.result;
console.log('数据库需要升级');
// 创建一个对象存储空间
db.createObjectStore('imgStore', { keyPath: 'id', autoIncrement: true });
console.log('对象存储表创建成功');
}
request.onsuccess = function(event) {
const db = event.target.result;
console.log('数据库打开成功');
}
https://img-blog.csdnimg.cn/direct/d89464d08ccf4fe0b89d3cb9ae5d3364.png
https://img-blog.csdnimg.cn/direct/fafc6a2165a54758a2736eaa6cd4e717.png
注意必要增加版本号，否则不触发更新变乱，这里新建了一个叫imgStore的对象存储表
添加和读取数据
添加和读取数据都在onsuccess的回调中执行，不必要更新版本，
添加数据add()---参数any
request.onsuccess = function(event) {
const db = event.target.result;
console.log('数据库打开成功');
// 连接数据库的表，比获取读写权限，默认只读
const transaction = db.transaction(['imgStore'], 'readwrite');
const objectStore = transaction.objectStore('imgStore');
// 添加数据
const re = objectStore.add({
name: 'test',
content:'测试数据'
});
re.onsuccess = function (event) {
console.log('文件添加成功');
}
} transaction是一个变乱，毗连了imgStore，并开放读写权限，之后再通过变乱，获取imgStore对象存储表，最后再执行add添加数据，这里添加了一个测试对象，同样添加时一个异步操作，必要回调等候结果，
https://img-blog.csdnimg.cn/direct/38de6832c4dd4904919c152727a8078d.png
https://img-blog.csdnimg.cn/direct/9cf76ca67e304714a37be723be8487ad.png
这里成功添加后可以查察数据表中的内容，如果内容没有出现可以 点击刷新，看到结果后可以发现，多了一个属性id，这个就是存储对象的标识符，前面设置了自动添加，若没有设置自动添加，则必要手动的添加一个id属性，且id的值不能和其他数据相同，否则都会添加失败
读取数据get()---参数标识符的值
request.onsuccess = function(event) {
const db = event.target.result;
console.log('数据库打开成功');
// 连接数据库的表，比获取读写权限，默认只读
const transaction = db.transaction(['imgStore'], 'readwrite');
const objectStore = transaction.objectStore('imgStore');
// // 添加数据
// const re = objectStore.add({
// name: 'test',
// content:'测试数据'
// });
// re.onsuccess = function (event) {
// console.log('文件添加成功');
// }
// 读取数据
const re2 = objectStore.get(1);
re2.onsuccess = function (event) {
console.log(re2.result);
}
} https://img-blog.csdnimg.cn/direct/924199e5db5b48cdbb4842a66e94a678.png
可以看到成功读取到了id为1的数据，
示例：存储一张图片
相识了添加和读取数据，那我们可以来实现上传一张图片，生存再数据库中，
思路：通过input file 上传一个图片，再将其存为blob，再将blob转成base64存储起来
（有关blob的操作可以参考：js二进制数据，文件---blob对象_js 输出 blob-CSDN博客）
let addFile;
request.onsuccess = function (event) {
const db = event.target.result;
console.log('数据库打开成功');
addFile = function (file) {
// 连接数据库的表，比获取读写权限，默认只读
const transaction = db.transaction(['imgStore'], 'readwrite');
const objectStore = transaction.objectStore('imgStore');
const re = objectStore.add(file)
re.onsuccess = function (event) {
console.log('文件添加成功');
}
}
}
const file = document.getElementById('file');
file.addEventListener('change', (event) => {
const file = event.target.files;
if (file.type == 'image/jpeg') { // 如果文件是图片
let blob = new Blob(, { type: 'image/jpeg' });
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (event) {
let base64 = event.target.result;
console.log(base64);
addFile({
name: file.name,
data: base64
})
}
}
})
https://img-blog.csdnimg.cn/direct/927e56f44a114b16b47945c9cb510b0c.png
https://img-blog.csdnimg.cn/direct/2f0f063131b7408ea687f9778180e5b0.png
如许我们就成功存放了一个base64情势的图片文件，
然后我们可以读取出这个图片，渲染再页面上
request.onsuccess = function (event) {
const db = event.target.result;
console.log('数据库打开成功');
let getFile = function(){
// 连接数据库的表
const transaction = db.transaction(['imgStore'], 'readonly');
const objectStore = transaction.objectStore('imgStore');
// 获取数据
const re = objectStore.get(1);
re.onsuccess = function (event) {
console.log(re.result);
let img = new Image();
img.src = re.result.data;
img.width=800;
document.body.appendChild(img);
}
}
getFile()
} https://img-blog.csdnimg.cn/direct/2dc2f6ed0b434a10833a066a29de6822.png
如许就成功拿到了图片，并且每次刷新后都会保留这个图片，就相当于一个能放大文件的localStore
完整代码展示
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>本地数据库</title>
</head>
<body>
<input type="file" name="" id="file">
</body>
<script src="index.js"></script>
</html>
index.js
// 浏览器本地数据库
console.log(indexedDB);// window.indexedDBlet addFile;//添加文件的方法// 打开数据库const request = indexedDB.open('myDatabase', 2);request.onerror = function (event) {console.error('数据库打开报错');}request.onupgradeneeded = function (event) {const db = event.target.result;console.log('数据库必要升级');// 创建一个对象存储空间db.createObjectStore('imgStore', { keyPath: 'id', autoIncrement: true });console.log('对象存储表创建成功');}request.onsuccess = function (event) {const db = event.target.result;console.log('数据库打开成功');// // 毗连数据库的表，获取读写权限，默认只读// const transaction = db.transaction(['imgStore'], 'readwrite');// const objectStore = transaction.objectStore('imgStore');// // 添加数据// const re = objectStore.add({// name: 'test',// content:'测试数据'// });// re.onsuccess = function (event) {// console.log('文件添加成功');// }// 读取数据// const re2 = objectStore.get(1);// re2.onsuccess = function (event) {// console.log(re2.result);// }addFile = function (file) { // 毗连数据库的表，获取读写权限，默认只读 const transaction = db.transaction(['imgStore'], 'readwrite'); const objectStore = transaction.objectStore('imgStore'); const re = objectStore.add(file) re.onsuccess = function (event) { console.log('文件添加成功'); }}let getFile = function(){ // 毗连数据库的表 const transaction = db.transaction(['imgStore'], 'readonly'); const objectStore = transaction.objectStore('imgStore'); // 获取数据 const re = objectStore.get(1); re.onsuccess = function (event) { console.log(re.result); let img = new Image(); img.src = re.result.data; img.width=800; document.body.appendChild(img); }}getFile()}const file = document.getElementById('file');file.addEventListener('change', (event) => {const file = event.target.files;if (file.type == 'image/jpeg') { // 如果文件是图片 let blob = new Blob(, { type: 'image/jpeg' }); let reader = new FileReader(); reader.readAsDataURL(blob); reader.onload = function (event) { let base64 = event.target.result; console.log(base64); addFile({ name: file.name, data: base64 }) }}})
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]