indexDB数据库快速入门

发布时间 2023-11-09 13:46:35作者: HuangBingQuan

indexDB简介

  • indexDB本质上就是存储数据,优点不受大小限制,当数据大于 > 5MB 时我们无法通过localStorage、cookie(只能存4k)存储
        // 连接数据库 (连接的过程是一个异步的)window.indexedDB.open('库名称', '库版本号') >= 0
        const request = window.indexedDB.open('test', 6); // 打开数据库(如果没有自动创建)
        request.onupgradeneeded = (e)=> { // 初始化
            console.log("数据库初始化或版本升级");
            document.querySelector('p').innerHTML = "数据库初始化或版本升级";
            const db = e.target.result;
            // 创建数据库存储对象
            const store = db.createObjectStore('user');
            store.add({ name: "HuangBingQuan", age: 20 }, '用户1');
            // console.log(db);
        }
        request.onsuccess = (e)=> { // 连接成功
            console.log("数据库连接成功");
            const db = e.target.result;
            // 创建一个事务
            // const transaction = db.transaction(['user']); // 选中 只能读
            const transaction = db.transaction(['user'], 'readwrite'); // 选中 可读可写
            const store = transaction.objectStore('user'); // 拿到store对象
            // 增加数据
            // store.add({ name: "ZhangSan", age: 21 }, '用户2');
            // 删除数据
            // store.delete('用户1');
            // 修改数据 (如果key不存在 那就添加)
            // store.put({  name: "HuangBingQuan", age: 20 }, '用户2');
            // 查找数据
            // const r = store.getAll();
            const r = store.get('用户1')
            r.onsuccess = (e)=> {
                console.log(e.target.result);
            }
        }
        request.onerror = (e)=> { //连接失败
            console.log("数据库连接失败"); 
            console.log(e.target.error);
        }