indexedDB---浏览器内建的数据库（学习记录）

IndexedDB

IndexedDB 是一个浏览器内建的数据库，它比 localStorage 强大得多。

• 通过支持多种类型的键，来存储几乎可以是任何类型的值。
• 支撑事务的可靠性。
• 支持键值范围查询、索引。
• 和 localStorage 相比，它可以存储更大的数据量。

要注意的点是，网页只能访问自身域名下的indexedDB数据库，而不能访问跨域的数据库。

代码和结果

// 浏览器本地数据库
// 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相关内容可以参考：

浏览器数据库 IndexedDB 入门教程 - 阮一峰的网络日志 (ruanyifeng.com)

IndexedDB (javascript.info)