Js| IndexDb Test

最新推荐文章于 2024-04-18 08:47:48 发布

Zero Ice

最新推荐文章于 2024-04-18 08:47:48 发布

阅读量244

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41593408/article/details/98824080

[001]前端系列专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一个基于IndexedDB的文件存储系统实现，包括如何创建对象存储、读写数据、处理版本升级等关键步骤。通过示例代码展示了IndexedDB在网页应用中存储文件和管理版本的能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>IndexDB Test</title>
</head>

<body>
    <div>
        <div>
            <label for="version">版本</label>
            <input type="text" name="version" id="version">
        </div>
        <button id="Sp">点击有惊喜</button>
    </div>
</body>
<script>
    var formData = document.querySelector("button#Sp");
    var version = document.querySelector("input#version");
    formData.onclick = () => {
        new Promise(() => {
            // IndexedDB
            var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
                IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction;
            var request = indexedDB.open("elephantFiles", version.value),
                db,
                createObjectStore = (dataBase) => {
                    console.log("Creating objectStore")
                    dataBase.createObjectStore("elephants");
                },
                putData = (name = 'test', data = '数据') => {
                    var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
                    var transaction = db.transaction(["elephants"], readWriteMode);
                    var put = transaction.objectStore("elephants").put(data, name);
                    transaction.objectStore("elephants").get("test").onsuccess = function (event) {
                        var testData = event.target.result;
                        console.log("Got elephant!" + testData);
                    };
                }
            request.onsuccess = (e) => {
                console.log("Success creating/accessing IndexedDB database");
                db = request.result;

                db.onerror = (event) => {
                    console.log("Error creating/accessing IndexedDB database");
                };
                console.log(db);

                if (db.setVersion) {
                    if (db.version != version.value) {
                        var setVersion = db.setVersion(version.value);
                        setVersion.onsuccess = function () {
                            createObjectStore(db);
                        };
                    }
                    else {
                        putData();
                    }
                }
                else {
                    putData();
                }
            }
            request.onerror = (e) => {
                console.log('onerror...');
            }
            request.onupgradeneeded = (event) => {
                console.log('onupgradeneeded...');
                createObjectStore(event.target.result);
            }
        }).catch((error) => {
            alert(error)
        })
    }
</script>

</html>