IndexedDB
IndexedDB 是一个浏览器内建的数据库，它比 localStorage 强大得多。
- 通过支持多种类型的键，来存储几乎可以是任何类型的值。
- 支撑事务的可靠性。
- 支持键值范围查询、索引。
- 和
localStorage相比，它可以存储更大的数据量。
要注意的点是，网页只能访问自身域名下的indexedDB数据库，而不能访问跨域的数据库。
代码和结果
javascript
// 浏览器本地数据库
// console.log(indexedDB);
// indexedDB结构：
// 数据库（库）->对象库（表）->存储的数据(key/value)
// indexedDB下可以有多个数据库，每个数据库下可以有多个对象库
// 数据库可以有许多不同的名称，但是必须存在于当前的源（域/协议/端口）中。不同的网站不能相互访问对方的数据库。
let dbName = "test";
// 打开\创建一个数据库(若原数据库版本低，则更新；若原数据库版本高，则保持)
let request = indexedDB.open(dbName,7);// 数据库的名称 string，版本号 number默认为1
let db ;// 打开数据库成功后存放数据库对象
console.log(request);
// 数据库已准备就绪，当尝试打开版本号高于其当前版本的数据库时，将触发该事件(更新)
// 在 upgradeneeded 处理程序中，只有在创建数据库版本时，对象库被才能被 创建/修改。这表示要对对象库操作需要更新一次版本
request.onupgradeneeded = (e)=>{
console.log(e);// 数据库中的内容
db = request.result;
// 创建存储库对象
let store = "user"; // 存储对象库名
let keyOptions = {
keyPath : "id",// 主键，访问存储对象的属性路径，例如id，这表示存储的数据属性中必须要有id属性
autoIncrement: false // autoIncrement为true，则自动生成新存储的对象的键，键是一个不断递增的数字，
}
if (!db.objectStoreNames.contains(store)) { // 如果没有 "user" 数据
// 此方法应该在upgradeneeded事件中执行，否则将报错（应该在upgradneeded事件的回调函数中调用createObjectStore方法创建store object，不应该在success的回调中，否则会报错）
db.createObjectStore(store,keyOptions);
}
delDB(db);
}
// 数据库打开失败
request.onerror = ()=>{
// 如果当前用户的数据库版本比 open 调用的版本更高（比如当前的数据库版本为 3，我们却尝试运行 open(...2)，就会产生错误并触发 openRequest.onerror）。
console.log("数据库连接失败"+request.error);
}
// 数据库已就绪
request.onsuccess = ()=>{
console.log("数据库连接成功");// 数据库中的内容
db = request.result;
console.log(db);
// 监听低版本号数据库，触发则关闭数据库
db.onversionchange = function() {
db.close();
console.log("数据库版本低已关闭，请重启页面.")
};
let store = "user"; // 存储对象库名
// add(db,store);
read(db,store)
}
// 数据库操作阻塞时触发
request.onblocked = ()=>{
db.close();
console.log("数据库操作失败已关闭.")
}
// 事务操作存储、删除数据
function add(db,store){
let transaction = db.transaction(store,"readwrite");// 操作user的事务，对其开放读写权限，默认只读readonly
// 获取对象库进行操作
let user = transaction.objectStore(store);
let data = {
id :1,
name : "Tom",
age : 18
}
let addData = user.add(data);
addData.onerror = ()=>{
console.log("数据添加成功"+addData.result);
}
addData.onsuccess = ()=>{
console.log("数据添加失败"+addData.error);
}
}
// 事务操作读取数据
function read(db,store){
let transaction = db.transaction(store,"readwrite");// 操作user的事务，对其开放读写权限，默认只读readonly
// 获取对象库进行操作
let user = transaction.objectStore(store);
let read = user.get(1);
read.onsuccess = ()=>{
console.log(read.result);
};
}
function delDB(db){
db.close();
// 删除这个数据库(需要先关闭才能删除)
indexedDB.deleteDatabase(db.result.name);
}
function delStore(db,name){// 删除一个对象库name
db.deleteObjectStore(name);
}
本文章仅作为记录，想学习更多indexed DB相关内容可以参考：