做爰全过程免费的教网站,进国企但是签的是外包,恶意镜像网站程序,部门网站建设情况总结1.认识indexedDB IndexedDB 是一个浏览器内建的数据库#xff0c;它可以存放对象格式的数据#xff0c;类似本地存储localstore#xff0c;但是相比localStore 10MB的存储量#xff0c;indexedDB可存储的数据量远超过这个数值#xff0c;具体是多少呢#xff1f;
默认情…1.认识indexedDB IndexedDB 是一个浏览器内建的数据库它可以存放对象格式的数据类似本地存储localstore但是相比localStore 10MB的存储量indexedDB可存储的数据量远超过这个数值具体是多少呢
默认情况下浏览器会将自身所在的硬盘位置剩余容量全部作为indexedDB的存储容量 这里差不多就对应这c盘的剩余容量所以indexDB有第一个特点容量大
存储的格式以对象的键值形式存储数据注意这里的 id 是一个唯一的索引属性 在indexedDB中需要有一个唯一的标识符来区分存储的内容这里使用的是id这表示存储的每一个值内都需要一个唯一的id值这是第二个特点统一的唯一标识符key
最后它采用的是对象存储库和存储表的数据存放方式你可以理解成indexedDB是一个大的数据对象object它内部包含了很多数据库object每个数据库内又有很多存储对象表array每个表内又有很多键值对object 在indexedDB中有很多上面的这种存储库对象可以看出这是一个树形结构根节点就是indexedDB
所以总结一下indexedDB 容量大有唯一标识符key树形结构的对象存储和localStore一样同一个域名下的indexedDB是一致的否则不一致每个网页都有各自的indexedDB补充 2.indexedDB数据库的使用
查看indexedDB
我们可以在开发者工具中直接查看indexedDB数据库也可以在控制台打印出来indexedDB是window对象下的一个属性
// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB 打开数据库
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(数据库打开成功);
}新建了一个myDatabase数据库触发 了一次版本更新在次执行时版本还是1就不会触发更新升级的事件 这样就成功新建、打开了一个数据库
新建一个对象存储表
db.createObjectStore(name[, keyOptions]);name 是存储区名称例如 books 表示书。
keyOptions 是具有以下两个属性之一的可选对象keyPath —— 对象属性的路径IndexedDB 将以此路径作为键例如 id。autoIncrement —— 如果为 true则自动生成新存储的对象的键键是一个不断递增的数字。 name储存表的名称keyOptions: 配置对象 keyPath: 储存数据的标识符autoIncrement默认为false若为true则会自动在储存的对象上添加标识符属性并附上一个自增的正数值1234...... 要操作对象存储表就需要更新版本号这个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(数据库打开成功);
}注意需要增加版本号否则不触发更新事件这里新建了一个叫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添加数据这里添加了一个测试对象同样添加时一个异步操作需要回调等待结果 这里成功添加后可以查看数据表中的内容如果内容没有出现可以 点击刷新看到结果后可以发现多了一个属性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);}
} 可以看到成功读取到了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[0];if (file.type image/jpeg) { // 如果文件是图片let blob new Blob([file], { 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})}}
}) 这样我们就成功存放了一个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.width800;document.body.appendChild(img);}}getFile()
} 这样就成功拿到了图片并且每次刷新后都会保留这个图片就相当于一个能放大文件的localStore
完整代码展示
index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title本地数据库/title
/head
bodyinput typefile name idfile/body
script srcindex.js/script
/htmlindex.js
// 浏览器本地数据库
console.log(indexedDB);// window.indexedDB
let 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.width800;document.body.appendChild(img);}}getFile()
}const file document.getElementById(file);
file.addEventListener(change, (event) {const file event.target.files[0];if (file.type image/jpeg) { // 如果文件是图片let blob new Blob([file], { 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})}}
})
