浅谈indexedDB/indexedDB数据实际储存的位置

最新推荐文章于 2023-07-26 15:55:51 发布

七宝文

最新推荐文章于 2023-07-26 15:55:51 发布

阅读量4.9k

点赞数 6

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42900858/article/details/115859805

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这里写了一个简单的数据库插入的测试。

<body>
    <button onclick="dbTest()">db测试</button>
</body>
<script>
    var db;

    var dbVersion = 1; // 全局的indexedDB数据库实例。

    // 2\. 通过IDBFactory接口的open方法打开一个indexedDB的数据库实例
    // 第一个参数： 数据库的名字，第二个参数：数据库的版本。返回值是一个：IDBRequest实例,此实例有onerror和onsuccess事件。
    let request = indexedDB.open("admin", dbVersion);


    // 打开数据库成功后，自动调用onsuccess事件回调。
    request.onsuccess = function (e) {
        console.log("开启成功success");
        db = e.target.result; // 获取到 demoDB对应的 IDBDatabase实例,也就是我们的数据库。
        db.onversionchange = () => {
            db.close();
        }
    };

    // 打开数据库失败
    request.onerror = function (e) {
        console.log("开启db失败" + e.currentTarget.error.message);
    };

    // 第一次打开成功后或者版本有变化自动执行以下事件：一般用于初始化数据库。
    request.onupgradeneeded = function (e) {
        console.log("版本修改了！");
        db = e.target.result;
        if (db.objectStoreNames.contains("users")) {
            db.deleteObjectStore("users")
        }
        db.createObjectStore("users", {
            keyPath: "username"
        })
        console.log('数据库版本更改为： ' + dbVersion);
    };
    let user = {
        username: '111007',
        phone: '189111833',
        address: 'aicoder.com'
    };

    function dbTest() {
        for (let index = 0; index < 10000; index++) {
            user.username = parseInt(user.username) + 1
            // 创建一个事务，类型：IDBTransaction，文档地址： https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction
            let transaction = db.transaction("users", "readwrite"),
                // 通过事务来获取IDBObjectStore
                store = transaction.objectStore("users"),
                result1 = store.add(user);
            result1.onsuccess = (e) => {
                console.log("1111success");
            }
        }
    }
</script>

在这里插入图片描述
这里可以看到自己定义的版本信息等

里面可以看到我们具体存的对象，上面是一共多少条。

值得一提的是，indexedDB的这些数据存在哪里呢。答案是
在这里插入图片描述
这是我的目录，也就存在硬盘中，50万条简单的数据也就30多M的文件大小。不知道硬盘没有空间时indexedDB是如何处理的。

七宝文

关注

6
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈indexedDB/indexedDB数据实际储存的位置

这里写了一个简单的数据库插入的测试。<body> <button onclick="dbTest()">db测试</button></body><script> var db; var dbVersion = 1; // 全局的indexedDB数据库实例。 // 2\. 通过IDBFactory接口的open方法打开一个indexedDB的数据库实例 // 第一个参数：数据库的名字，第二个参数：
复制链接

扫一扫