欢迎来到码农权的博客 MaNongGeGe|

indexDB数据库快速入门

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);
        }

本文作者:HuangBingQuan

本文链接:https://www.cnblogs.com/bingquan1/p/17819542.html

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   HuangBingQuan  阅读(151)  评论(0编辑  收藏  举报
历史上的今天:
2022-11-09 React总结
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起
  1. 1 不将就 码农权
  2. 2 Bleeding Love 码农权
  3. 3 想你念你 码农权
Bleeding Love - 码农权
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available