indexedDB---浏览器内建的数据库(学习记录)

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相关内容可以参考:

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

IndexedDB (javascript.info)

相关推荐
KangkangLoveNLP38 分钟前
手动实现一个迷你Llama:使用SentencePiece实现自己的tokenizer
人工智能·深度学习·学习·算法·transformer·llama
浪淘沙jkp1 小时前
大模型学习二:DeepSeek R1+蒸馏模型组本地部署与调用
学习·deepseek
m0_613607012 小时前
数据集(Dataset)和数据加载器(DataLoader)-pytroch学习3
学习
序属秋秋秋2 小时前
算法基础_基础算法【位运算 + 离散化 + 区间合并】
c语言·c++·学习·算法·蓝桥杯
虾球xz3 小时前
游戏引擎学习第198天
学习·游戏引擎
网络安全指导员4 小时前
如何在JMeter中配置断言,将非200状态码视为测试成功
网络·学习·jmeter·安全·web安全·架构
浪淘沙jkp4 小时前
大模型学习四:‌DeepSeek Janus-Pro 多模态理解和生成模型 本地部署指南(折腾版)
python·学习·deepseek
Kx…………4 小时前
Uni-app入门到精通:uni-app的基础组件
前端·css·学习·uni-app·html
~樱小路~4 小时前
网络:华为数通HCIA学习:IP路由基础
网络·学习·华为
吴梓穆5 小时前
UE5学习笔记 FPS游戏制作42 按钮添加回调函数
笔记·学习·ue5