IndexedDB基本操作案例

最新推荐文章于 2025-07-07 15:39:40 发布

原创最新推荐文章于 2025-07-07 15:39:40 发布 · 719 阅读

3 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了如何使用IndexedDB进行数据的增删改查操作，并演示了如何创建索引以提高查询效率。通过具体的HTML源码示例，读者可以了解到数据库的打开、表的创建、数据的添加、读取、更新、删除以及利用索引进行查询的全过程。

摘要生成于 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>Document</title>
</head>

<body>
    <button "add()">
        添加
    </button>
    <button "read()">
        查询
    </button>
    <button "update()">
        更新
    </button>
    <button "remove()">
        删除
    </button>
    <button "indexQ()">
        索引查询
    </button>
    <script>
        // 数据库实例
        var db;
        // 打开或新建数据库和表
        function createDBAndTable() {
            // 打开数据库
            var request = window.indexedDB.open('lujing', '4.5');
            // 打开失败回调
            request.onerror = function(event) {
                console.log('数据库打开报错');
            };

            // 打开成功回调
            request.onsuccess = function(event) {
                db = request.result;
                console.log('数据库打开成功');

            };
            // 有更新回调（版本不一致更新回调）
            request.onupgradeneeded = function(event) {
                db = event.target.result;
                // 创建表
                var objectStore = db.createObjectStore('person', {
                    keyPath: 'id'
                });
                // 创建索引
                objectStore.createIndex('name', 'name', {
                    unique: false
                });
                // 创建索引
                objectStore.createIndex('email', 'email', {
                    unique: false
                });
            }

        }
        createDBAndTable();
        // 查询
        function read() {
            var transaction = db.transaction(['person']);
            var objectStore = transaction.objectStore('person');
            var request = objectStore.get(1);

            request.onerror = function(event) {
                console.log('事务失败');
            };

            request.onsuccess = function(event) {
                if (request.result) {
                    console.log('Name: ' + request.result.name);
                    console.log('Age: ' + request.result.age);
                    console.log('Email: ' + request.result.email);
                } else {
                    console.log('未获得数据记录');
                }
            };
        }
        // 添加
        function add() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .add({
                    id: 1,
                    name: '张三',
                    age: 24,
                    email: 'zhangsan@example.com'
                });

            request.onsuccess = function(event) {
                console.log('数据写入成功');
            };

            request.onerror = function(event) {
                console.log('数据写入失败', event);
            }
        }
        // 更新
        function update() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .put({
                    id: 1,
                    name: '李四',
                    age: 35,
                    email: 'lisi@example.com'
                });

            request.onsuccess = function(event) {
                console.log('数据更新成功');
            };

            request.onerror = function(event) {
                console.log('数据更新失败');
            }
        }
        // 删除
        function remove() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .delete(1);

            request.onsuccess = function(event) {
                console.log('数据删除成功');
            };
        }
        // 使用索引
        function indexQ() {
            var transaction = db.transaction(['person'], 'readonly');
            var store = transaction.objectStore('person');
            var index = store.index('name');
            var request = index.get('李四');

            request.onsuccess = function(e) {
                var result = e.target.result;
                if (result) {
                    console.log(JSON.stringify(result))
                } else {
                    console.log('没有查询到')
                }
            }
        }
    </script>
</body>

</html>