属于前端的数据库--indexdDB

indexdDB介绍
IndexedDB是一种 NoSQL 数据库，和关系型数据库不同的是，IndexedDB是面向对象的，它存储的是Javascript对象，类似mangoDB的存储方式。

IndexedDB是自带transaction的，所有的数据库操作都会绑定到特定的事务上，并且这些事务是自动提交了，IndexedDB并不支持手动提交事务。

IndexedDB API大部分都是异步的，在使用异步方法的时候，API不会立马返回要查询的数据，而是返回一个callback。
其异步API的本质是向数据库发送一个操作请求，当操作完成的时候，会收到一个DOM event，通过该event，我们会知道操作是否成功，并且获得操作的结果。

IndexedDB还有一个很重要的特点是其同源策略，每个源都会关联到不同的数据库集合，不同源是不允许访问其他源的数据库，从而保证了IndexedDB的安全性，也就是说它不允许跨域。

indexdDB使用

1.初始化

let db
let openRequest
//兼容浏览器写法
const indexedDB = window.indexedDB || window.webkitIndexedDb || window.mozIndexed || window.msIndexedDB

/**
 * 初始化数据库
 * @param {string} dbName 数据库名
 * @param {Array} tableList 数据库列表
 */

const init = ({ dbName, tableList }) => {
    // 向浏览器发送创建数据库的请求
    // 存在就打开 不存在就新建 第二个参数为db 版本
    openRequest = indexedDB.open(dbName)
    // 新的数据库创建 或者数据库的版本号被更改会被触发
    openRequest.onupgradeneeded = function (e) {
        // 表的创建在这个回调里执行,返回表的实例
        const thisDb = e.target.result
        console.log('onupgradeneeded回调被触发' + thisDb)
        if (tableList?.length) {
            tableList.forEach(table => {
                if (!thisDb.objectStoreNames.contains(table.tableName)) {
                    console.log('数据库列表不包含这张表，此时新建')
                    // keyPath 主键 autoIncrement 是否自增
                    const objectStore = thisDb.createObjectStore(table.tableName, {
                        keyPath: table.keyPath,
                        ...table.attr
                        // autoIncrement: true,
                    })
                    if (table.indexName) {
                        // 创建表的时候 可以去指定那些字段是可以被索引的字段
                        objectStore.createIndex(table.indexName, table.indexName, {
                            unique: table.unique || false
                        })
                    }
                }
            })
        } else {
            console.error('请传入数据表参数')
        }
    }
    // 已经创建好的数据库创建成功的时候
    openRequest.onsuccess = function (e) {
        db = e.target.result

        db.onerror = function (event) {
            console.error('DB error: ' + event.target.errorCode)
            console.dir(event.target)
        }
    }
    // 打开或创建失败时调用
    openRequest.onerror = function (e) {
        console.error('openRequest.onerror', e)
    }
}

点击按钮调用初始化方法，刷新indexdDb，出现我们创建的数据库


1.png

2.增删查改

增加一条数据

/**
 * 新增
 * @param {string} tableName 表名
 * @param {object} data 数据
 * @returns {promise}
 */
const add = ({ tableName, data }) => {
    return new Promise((suc, fail) => {
        const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data)

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

        request.onerror = function (event) {
            fail()
            console.log('数据写入失败', event)
        }
    })
}

删除

/**
 * 根据主键删除对应数据
 * @param {string} tableName 表名
 * @param {string} key 主键
 * @returns {promise}
 */

const remove = ({ tableName, key }) => {
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.delete(key)

        request.onerror = function (event) {
            console.error('更新失败', event)
            fail()
        }

        request.onsuccess = function (event) {
            console.log('删除成功', event)
            suc()
        }
    })
}

查询所有数据

/**
 * 遍历所有数据 使用游标来实现
 * @param {string} tableName 表名
 * @returns {promise}
 */
const findAll = tableName => {
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        // 我这里做的是把所有的结果全部收集起来 当然我们可以做其他事情此处拿到的value是每条数据的结果、还有primaryKey主键、key、与direction
        const result = []
        objectStore.openCursor().onsuccess = function (event) {
            const cursor = event.target.result
            if (cursor) {
                result.push({ ...cursor.value })
                cursor.continue()
            } else {
                suc(result)
                console.log('findAll成功==>' + result)
            }
        }
        objectStore.openCursor().onerror = function (event) {
            console.dir(event)
            fail()
        }
    })
}

查询单条数据

/**
 * 根据主键查询对应数据
 * @param {string} tableName 表名
 * @param {string} key 主键
 * @returns {promise}
 */
const findOneByMainKey = ({ tableName, key }) => {
    return new Promise((suc, fail) => {
        if (!key) {
            fail()
            return
        }
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.get(key)

        request.onerror = function (event) {
            console.error('根据主键查询对应数据', event)
            fail()
        }

        request.onsuccess = function () {
            suc(request.result || {})
        }
    })
}

修改

/**
 * 根据主键更新对应数据
 * @param {object} data 对应的主键与值 和 数据
 * @param {string} tableName 表名
 * @returns {promise}
 */
 const update = ({ tableName, data }) => {
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.put(data)

        request.onerror = function (event) {
            console.error('更新失败', event)
            fail()
        }

        request.onsuccess = function (event) {
            console.log('更新成功', event)
            suc()
        }
    })
}

3.其他一些api封装的方法，如关闭数据库，清空表数据

源码index.html

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

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no" />
    <title>indexedDB</title>
    <style>
        .clickBtn {
            width: 200px;
            height: 46px;
            line-height: 46px;
            background-color: #2e82ff;
            color: #ffffff;
            font-size: 18px;
            text-align: center;
            border-radius: 27px;
            position: relative;
            cursor: pointer;
            margin-right: 20px;
        }

        .clickBtn::before {
            content: '';
            position: absolute;
            left: 0px;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(to right,
                    rgba(255, 255, 255, 0) 30%,
                    rgba(255, 255, 255, 0.2) 50%,
                    rgba(255, 255, 255, 0) 70%);
            background-size: 200%;
            animation: wipes 1s infinite;
        }

        #dataContainer li {
            margin-bottom: 20px;
        }

        #dataContainer li span {
            margin-right: 20px;
        }

        input {
            appearance: none;
            text-align: center;
            height: 36px;
            width: 248px;
            border-radius: 15px;
            border: 0px solid #fff;
            padding: 0 8px;
            outline: 0;
            letter-spacing: 1px;
            color: #fff;
            font-weight: 600;
            background: rgba(45, 45, 45, .10);
            border: 1px solid rgba(255, 255, 255, .15);
            box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1) inset;
            text-shadow: 0 1px 2px rgba(0, 0, 0, .1);
            -o-transition: all .2s;
            -moz-transition: all .2s;
            -webkit-transition: all .2s;
            -ms-transition: all .2s;
            color: #2e82ff;
        }

        @keyframes wipes {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 100% 0;
            }
        }
    </style>
</head>

<body>
    <div style="display: flex;width: 100%; margin: 50px auto">
        <div class="clickBtn">
            <span>初始化数据库</span>
        </div>
        <div class="clickBtn">
            <span>新增</span>
        </div>
        <div class="clickBtn">
            <span>删除</span>
        </div>
        <div class="clickBtn">
            <span>修改</span>
        </div>
        <div class="clickBtn">
            <span>查询单条数据</span>
        </div>

        <div class="clickBtn">
            <span>查询所有</span>
        </div>
    </div>
    <div>
        <input style="width: 300px;" type="text" placeholder="请输入需要删除/更新/查询数据的主键值" id="input" />
        <ul id="dataContainer">

        </ul>
    </div>
    <script src="./dbUtils.js"></script>
    <script>
        let mainData = []
        window.onload = () => {
            init({
                // 数据库名称
                dbName: 'lbcTestDb',
                // 数据表 数组 如果要创建多个表，则写多个即可
                tableList: [
                    {
                        // 表名
                        tableName: 'testTable',
                        // 主键
                        keyPath: 'name'
                        // 对应表的其他属性
                        // attr:{
                        //    autoIncrement:true, //是否自增
                        // },
                        // indexName: 'index',// 索引 不建议使用 因为使用索引 当前表必须有数据否则直接报错
                        // unique:false // 对应索引是否唯一
                    }
                ]
            })
        }
        // const ulFragment = document.createDocumentFragment()
        const getDataToRender = (data) => {
            if (!data || !data.length) return
            console.log(data)
            let liHtml = ''
            data.forEach((d, index) => {
                console.log(d)

                liHtml += `<li><span>第${index + 1}条</span><span>姓名:${d.name}</span><span>工号:${d.employNumber}</span></li>`
            });
            document.querySelector('#dataContainer').innerHTML = liHtml
        }
        const getIndexName = (index) => {
            return 'lbc' + index
        }
        const getRandomNumber = () => {
            return parseInt(Math.random() * 100000000)
        }
        const btnDoms = document.querySelectorAll('.clickBtn')
        //初始化
        btnDoms[0].addEventListener('click', () => {
            console.log('初始化')
            init({
                // 数据库名称
                dbName: 'lbcTestDb',
                // 数据表 数组 如果要创建多个表，则写多个即可
                tableList: [
                    {
                        // 表名
                        tableName: 'testTable',
                        // 主键
                        keyPath: 'name'
                    }
                ]
            })
        })
        //新增
        let count = parseInt(Math.random() * 100000)
        btnDoms[1].addEventListener('click', () => {
            count++
            add({
                // 加到那个表里
                tableName: 'testTable',
                // data是要添加的数据
                data: {
                    // 对应的主键与值 此处主键为name 
                    name: getIndexName(count),
                    //  数据
                    employNumber: getRandomNumber(),
                }
            }).then(async () => {
                const data = await findAll('testTable')
                getDataToRender(data)
            })
        })
        //删除
        btnDoms[2].addEventListener('click', async () => {
            // return console.log('11111')
            const data = await findAll('testTable')
            remove({
                tableName: 'testTable',
                key: data[4].name,
            }).then(async () => {
                console.log('删除第3条')
                const data = await findAll('testTable')
                getDataToRender(data)
            })
        })
        //修改
        btnDoms[3].addEventListener('click', () => {
            // return console.log(document.querySelector('#input').value)
            let name = document.querySelector('#input').value || 'lbc4'
            update({
                // 表名
                tableName: 'testTable',
                // 对应的主键与值 和 数据 此处主键为userId 主键值为id
                data: {
                    name,
                    employNumber: "update" + getRandomNumber()
                },
            }).then(async () => {
                // const data = await findAll('testTable')
                // getDataToRender(data)
                findOneByMainKey({
                    // 表名
                    tableName: 'testTable',
                    // 主键值
                    key: name,
                }).then(async (res) => {
                    console.log("查询:" + name, res)
                    getDataToRender([res])
                })
            })
        })
        //查询单个(通过主键)
        btnDoms[4].addEventListener('click', () => {
            // return console.log('11111')
            let name = document.querySelector('#input').value || 'lbc4'
            findOneByMainKey({
                // 表名
                tableName: 'testTable',
                // 主键值
                key: name,
            }).then(async (res) => {
                console.log("查询lbc4", res)
                getDataToRender([res])
            })
        })
        //查询所有
        btnDoms[5].addEventListener('click', () => {
            // return console.log('11111')
            findAll('testTable'
            ).then(res => {
                console.log("查询所有", res)
                getDataToRender(res)
            })
        })
    </script>
</body>

</html>

源码dbUtils.js

// @ts-nocheck
let db
let openRequest
//兼容浏览器写法
const indexedDB = window.indexedDB || window.webkitIndexedDb || window.mozIndexed || window.msIndexedDB

/**
 * 初始化数据库
 * @param {string} dbName 数据库名
 * @param {Array} tableList 数据表
 */

const init = ({ dbName, tableList }) => {
    // 向浏览器发送创建数据库的请求
    // 存在就打开 不存在就新建 第二个参数为db 版本
    openRequest = indexedDB.open(dbName)
    // 新的数据库创建 或者数据库的版本号被更改会被触发
    openRequest.onupgradeneeded = function (e) {
        // 表的创建在这个回调里执行,返回表的实例
        const thisDb = e.target.result
        console.log('onupgradeneeded回调被触发' + thisDb)
        if (tableList?.length) {
            tableList.forEach(table => {
                if (!thisDb.objectStoreNames.contains(table.tableName)) {
                    console.log('数据库列表不包含这张表，此时新建')
                    // keyPath 主键 autoIncrement 是否自增
                    const objectStore = thisDb.createObjectStore(table.tableName, {
                        keyPath: table.keyPath,
                        ...table.attr
                        // autoIncrement: true,
                    })
                    if (table.indexName) {
                        // 创建表的时候 可以去指定那些字段是可以被索引的字段
                        objectStore.createIndex(table.indexName, table.indexName, {
                            unique: table.unique || false
                        })
                    }
                }
            })
        } else {
            console.error('请传入数据表参数')
        }
    }
    // 已经创建好的数据库创建成功的时候
    openRequest.onsuccess = function (e) {
        db = e.target.result

        db.onerror = function (event) {
            console.error('DB error: ' + event.target.errorCode)
            console.dir(event.target)
        }
    }
    // 打开或创建失败时调用
    openRequest.onerror = function (e) {
        console.error('openRequest.onerror', e)
    }
}

/**
 * 新增
 * @param {string} tableName 表名
 * @param {object} data 数据
 * @returns {promise}
 */
const add = ({ tableName, data }) => {
    return new Promise((suc, fail) => {
        const request = db.transaction([tableName], 'readwrite').objectStore(tableName).add(data)

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

        request.onerror = function (event) {
            fail()
            console.log('数据写入失败', event)
        }
    })
}

/**
 * 根据主键删除对应数据
 * @param {string} tableName 表名
 * @param {string} key 主键
 * @returns {promise}
 */

const remove = ({ tableName, key }) => {
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.delete(key)

        request.onerror = function (event) {
            console.error('更新失败', event)
            fail()
        }

        request.onsuccess = function (event) {
            console.log('删除成功', event)
            suc()
        }
    })
}

/**
 * 根据主键更新对应数据
 * @param {object} data 对应的主键与值 和 数据
 * @param {string} tableName 表名
 * @returns {promise}
 */
const update = ({ tableName, data }) => {
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.put(data)

        request.onerror = function (event) {
            console.error('更新失败', event)
            fail()
        }

        request.onsuccess = function (event) {
            console.log('更新成功', event)
            suc()
        }
    })
}

/**
 * 遍历所有数据 使用游标来实现
 * @param {string} tableName 表名
 * @returns {promise}
 */
const findAll = tableName => {
    // return new Promise((suc, fail) => {
    //     const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
    //     const result = []
    //     objectStore.openCursor().onsuccess = function (event) {
    //         const cursor = event.target.result
    //         if (cursor) {
    //             result.push({ ...cursor.value })
    //             cursor.continue()
    //         } else {
    //             suc(result)
    //             console.log('findAll成功==>' + result)
    //         }
    //     }
    //     objectStore.openCursor().onerror = function (event) {
    //         console.dir(event)
    //         fail()
    //     }
    // })
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.getAll()

        request.onerror = function (event) {
            fail()
            console.log('readAll--->读取表事务失败', event)
        }

        request.onsuccess = function () {
            suc(request.result || [])
        }
    })
}

/**
 * 根据主键查询对应数据
 * @param {string} tableName 表名
 * @param {string} key 主键
 * @returns {promise}
 */
const findOneByMainKey = ({ tableName, key }) => {
    return new Promise((suc, fail) => {
        if (!key) {
            fail()
            return
        }
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.get(key)

        request.onerror = function (event) {
            console.error('根据主键查询对应数据', event)
            fail()
        }

        request.onsuccess = function () {
            suc(request.result || {})
        }
    })
}

/**
 * 删除数据库
 * @param {string} DB_NAME 数据库名称
 * @returns
 */
const deleteDB = async DB_NAME => {
    return indexedDB.deleteDatabase(DB_NAME)
}

/**
 * 关闭数据库
 * @param {string} DB_NAME 数据库名称
 * @returns
 */
const closeDB = DB_NAME => {
    return indexedDB.close(DB_NAME)
}
/**
 * 清除表
 * @param {string} tableName
 * @returns {promise}
 */
const clearTable = tableName => {
    return new Promise((suc, fail) => {
        const objectStore = db.transaction([tableName], 'readwrite').objectStore(tableName)
        const request = objectStore.clear()

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

        request.onsuccess = function (event) {
            console.log('清除成功', event)
            suc()
        }
    })
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容