idb操作浏览器IndexedDB增删改查示例代码-html代码-BFW代码库

idb操作浏览器IndexedDB增删改查示例代码

代码语言：html

所属分类：其他

代码描述：idb操作浏览器IndexedDB增删改查示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IndexedDB 示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            font-size: 1em;
            cursor: pointer;
        }
        #output {
            margin-top: 20px;
            font-size: 1.2em;
            color: #333;
        }
    </style>
</head>
<body>
    <button id="createBtn">创建数据</button>
    <button id="readBtn">读取数据</button>
    <button id="updateBtn">更新数据</button>
    <button id="deleteBtn">删除数据</button>
    <div id="output"></div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/idb.umd.js"></script>
    <script>
        const dbPromise = idb.openDB('my-database', 1, {
            upgrade(db) {
                if (!db.objectStoreNames.contains('my-store')) {
                    db.createObjectStore('my-store', { keyPath: 'id', autoIncrement: true });
                }
            },
        });

        document.getElementById('createBtn').addEventListener('click', async () => {
            const data = { name: 'Alice', age: 25 };
             const data3 = { name: 'Alice2', age: 256 };
            await addData(data);
             await addData(data3);
            document.getElementById('output').innerText = '数据已创建';
        });

        document.getElementById('readBtn').addEventL.........完整代码请登录后点击上方下载按钮下载查看