入门indexedDB

最新推荐文章于 2025-08-04 23:14:52 发布

浮舍_

最新推荐文章于 2025-08-04 23:14:52 发布

阅读量292

点赞数 9

CC 4.0 BY-SA版权

文章标签：数据库前端 indexedDB

本文链接：https://blog.csdn.net/Zrf2191318455/article/details/148105180

概念：

IndexedDB 是一种基于浏览器的 NoSQL 数据库，用于在客户端持久化存储大量结构化数据。

特点：

以键值对形式存储；

键一般为字符串属性，值可以支持大多类型；

操作是异步的，不阻塞主线程；

可以建立索引，加快查询速度；

数据持久化存储，除非手动删除或清除缓存，并且可以离线访问；

相关API：

以代码形式介绍，主要以介绍API为主，不考虑代码是否错误，主要问题在变量的定义和参数上。

//1.打开或创建一个数据库
const request = indexedDB.open('databaseName', version);//数据库名，版本号，版本号只能增加不能减小，且为整数

//2.当数据库被创建或版本号修改后被调用,注意：创建/删除表和索引的时候都需要在这里，意味着只有修改版本号才能进行该操作
request.onupgradeneeded=function(e){
    const db=e.target.result
    //3.创建对象存储，类似数据库中的表
    const objectStore=db.createObjectStore('storeName',{keyPath:"id"，autoIncrement:true})//第一个参数为表名，字符串。第二个参数为对象，有两个参数：keyPath指定主键名，这里是id；autoIncrement表示如果不给每条数据手动设置主键信息，主键是否自动递增，默认为false，不递增。注：如果autoIncrement设置为false，则添加数据时必须手动添加主键值，且主键值为数字形式
    //4.创建索引，加快查询速度
    objectStore.createIndex('index','index',{unique:false})//第一个参数索引名，任意字符串；第二个参数，要建立索引的属性，必须要在表中，值为字符串或数组，分别表示建立单索引或联合索引；第三个参数：对象，常用属性：unique:第二个参数中的属性是否为唯一值；multiEntry：当第二个参数中属性的值为数组时，是否对数组中每个元素建立单独的索引。
}

//5.当数据库打开成功后调用
request.onsuccess=function(e){
    console.log('打开成功')
    const db = e.target.result
    //6.开始进行事务的操作，获取想要操作的表
    const transaction=db.transaction(StoreName,'readwrite/readonly')//第一个参数可以是字符串数组或者字符串，当为数组时，表示想要同时操作多张表；当为字符串时表示只操作某一张表。第二个参数是字符串，值为readwrite（可读写）或readonly（只读），若设置为只读，则不可增删改，只能查
    //7.对指定表进行操作
    const st=transaction.objectStore(storeName)//参数为上一步第一个参数中涉及到的表名
    //操作表中数据,此处演示所有内容，没考虑是否报错
    //8.增加
    let req=st.add({key1:val1,key2:val2})//值必须为对象
    //9.删除
    let req=st.delete(id)//值为需要删除的主键值，就是在第三个API中keyPath的属性值，这里是id
    //10.修改
    let req=st.put({key1:val1,key2:val2})//值为对象，同增加，当有对应主键内容时进行修改，没有的话则添加
    //11.查询
    let req=st.get(id)//值为需要查询的主键值，就是在第三个API中keyPath的属性值，这里是id
    //12.操作成功查询，增删改查都可用
    req.onsuccess=function(){
        console.log('操作成功')
    }
    //13.操作失败查询，增删改查都可用
    req.onerror=function(){
        console.log('操作失败')
    }
    //使用索引查询数据
    //14.获取索引
    let ind=st.index('索引名')//参数为创建索引时的第一个参数，表示要使用该索引进行查询
    //15.根据索引的值查询内容
    let req=ind.get(val)//参数为设置索引时第二个参数的值，若设置时第二个参数为数组，则这里面也是数组，属性值的顺序要和设置索引时的顺序相同，不能少
}