【前端js】 indexedDB Nosql的使用方法

Loong_DQX2024-12-24 12:02

一、背景

Redis的数据存储位置是在服务器内存中，它的目的是是获取数据更快；indexedDB是在客户端的本地存储中，它想要解决的问题是存储更多的数据，相较于localStorage、sessionStorage。

这篇文章想讲的是indexedDB，用于将网页中所要用到的数据存储在本地中，使用索引实现对数据的高性能搜索。

二、indexedDB数据库

2.1 indexedDB 的特点

  1. 非关系型数据库：数据以键值对的方式存储。
  2. 持久化存储：像cookie、localStorage以及sessionStorage本地存储是存储在浏览器缓存中，一旦缓存被清除，数据都将被清除掉，但是indexedDB所保存的数据不会，它只能通过手动删除来清除数据。
  3. 异步操作
  4. 支持事务：当事务中的操作发生错误时，会进行回退。
  5. 同源策略：网页只能访问自身域名下的数据库，无法访问跨域的数据库。
  6. 存储容量大。

2.2 使用indexedDB数据库基本步骤

  1. 获取浏览器indexedDB对象。
  2. 打开数据库 =>得到返回值request。
  3. 从request中得到数据库对象。
  4. 数据库对象中获取仓库对象进行操作。 => mysql等数据库中是表，而indexedDB是仓库

三、方法拆解，知识点汇总。

获取浏览器indexedDB对象

javascript 复制代码 
// 这个做法是因为 不同的浏览器获取indexedDB的方式不一样。
// mozIndexedDB：火狐浏览器内核；webkitIndexedDB：webkit内核；msIndexedDB：IE内核。
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

打开数据库对象

javascript 复制代码 
var request = window.indexedDB.open(Dynamo,DBversion);   //开启数据库对象并返回请求对象

给请求对象设置监听事件，该对象可以设置三种监听事件，success、error 以及 onupgradeneeded。

success 是请求成功所要执行的监听事件。

error 是请求失败后所要执行的监听事件。

onupgradeneeded 是版本升级之后所要执行的监听事件。版本升级怎么判定：上述打开数据库函数接收了一个数据库版本号DBversion，该参数与之前的值不同就表示要升级。

javascript 复制代码 
request.onerror = function(event){
    alert("数据库连接失败：" + event.target.errorCode);
}
let db;  //用于接收数据库对象
request.onsuccess = function(event){
    db = event.target.result;
    //连接成功时获取数据库对象（也可以用request.result）
    alert("数据库连接成功！");
}
request.onupgradeneeded = function(event){
    Alert("版本更新");
}

在数据库中创建仓库，删除仓库，获取仓库对象

新建仓库

javascript 复制代码 
var store = db.createObjectStore(name,option);   //返回仓库对象

这里面的option包含两个选项，一个是keyPath、一个是autoIncrement。

keyPath：键路径，类似mysql中的主键。

autoIncrement：是否自增长。

javascript 复制代码 
db.deleteObjectStore(name)     //删除仓库

创建索引

javascript 复制代码 
store.createIndex(索引名,索引所对应的键名,{unique:true|false});

判断仓库是否存在

javascript 复制代码 
db.objectStoreNames.contains("books");

indexedDB 事务

事务模式

readonly：只读访问，在查询对象存储时使用。

readwrite：提供对某个对象存储的读取和写入访问权。

versionchange：提供读取和写入访问权来修改对象存储定义，或者创建一个新的对象存储。

javascript 复制代码 
var transaction = db.transaction("books","readwrite"); //为一个对象仓库创建一个读写事务
//从事务获取对象仓库
var objectStore = transaction.objectStore("books");   //事务获取对象仓库

为仓库添加监听事件

abort：事务中断

complete：事务完成

error：事务出错

javascript 复制代码 
var transaction = db.transaction("books","readwrite");
transaction.oncomplete = function(event){
    
}
transaction.onerror = function(event){
    
}
transaction.onbort = function(event){

}

数据库的增、删、改、查。

javascript 复制代码 
//这里的objectStore 是获取到的数据库仓库对象。
//数据库的条目的增加
objectStore.add(objectName);
//数据库内容的修改
objectStore.put(objectName);     //修改是键值相同
//数据库条目的删除
objectStore.delete(objectName);
//清空数据库仓库
objectStore.clear()   //清空objectStore
//数据库数据的读取
var request = objectStore.get(value);

事件监听

javascript 复制代码 
request.onerror = function(event){}
request.onsuccess = function(event){}

游标遍历

javascript 复制代码 
//游标遍历的打开可以通过利用对象仓库（根据主键，keyPath），也可以通过索引
//获取到仓库对象 objectStore
//由仓库对象打开游标
var cursor = objectStore.openCursor();

//由索引打开
//获取仓库对象的索引
var index = objectStore.index(indexName);
Var cursor = index.openCursor();

cursor.onsuccess = function(e){
    //获取结果集
    var result = e.target.result;
    if(result){
        result.continue();
    }else{
        Console.log("遍历完成！");
    }
}

最后还有一方面的知识是 IDBKeyRange 根据键值的大小来搜索。（用于设置范围供给openCursor使用）

javascript 复制代码 
var keyRangeValue = IDBKeyRange.bound("A","F",true|false,true|false);   //上下限 x< 值 <y
//这里的true表示不包括等于，false代表包括等于
objectStore.openCursor(keyRangeValue).onsuccess = function(event){}

IDBKeyRange.upperBound(x)  //<=x
IDBKeyRange.upperBound(x,true)  // <x
IDBKeyRange.lowerBound(y)  //>=y
IDBKeyRange.lowerBound(y,true)  //>y
IDBKeyRange.only(x) // =
IDBKeyRange.includes(x,y,z) //包括

思维导图

四、例子讲解

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // In the following line, you should include the prefixes of implementations you want to test.
    // window.mozIndexedDB 火狐浏览器内核    window.webkitIndexedDB
    window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    // DON'T use "var indexedDB = ..." if you're not in a function.
    // Moreover, you may need references to some window.IDB* objects:
    window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
    window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
    // (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)
 
    if (!window.indexedDB) {
        console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
    }else{
        console.log("有indexedDB。");
    }
 
    let db; //用于存储连接成功后返回的数据库对象
 
    //DBName 是数据库名 DBVersion 数据库版本
    var request = window.indexedDB.open("MyBook", 1);
    request.onerror = function(event){
        alert("数据库连接失败：" + event.target.errorCode);
    }
    request.onsuccess = function(event){
        console.log(event);
        db = event.target.result;
        //连接成功时获取数据库对象（也可以用request.result）
        alert("数据库连接成功！");
 
        var trans = db.transaction("myBooks","readwrite");     //为仓库对象创建读写事务
        //给事务添加监听事件
        trans.oncomplete = function(event){
            console.log(event);
            console.log("事务结束!");
        }
        trans.onerror = function(event){
            console.log("Error:", event.target.error.name)
        }
 
        //这是添加事务里面所要运行的代码
        var bookStore = trans.objectStore("myBooks");      //获取仓库对象的事务
 
        bookStore.put({"name":"宿命","isbn":"isbn002","price":35});
 
        console.log(db.objectStoreNames.contains("myBooks"));
 
    }
    request.onupgradeneeded = function(event){
        var db = event.target.result;
        //数据库仓库中内容发生变化所要的更新写在这里
        var objectStore = db.createObjectStore("myBooks",{keyPath:"isbn"});   //仓库对象
        objectStore.createIndex("name","name",{unique:false});    //给仓库对象加索引
        objectStore.createIndex("price","price",{unique:false});
 
        var bookList = [
            {"name":"微尘","isbn":"isbn001","price":31},
            {"name":"红手指","isbn":"isbn002","price":25},
            {"name":"时生","isbn":"isbn003","price":19},
            {"name":"非暴力沟通","isbn":"isbn004","price":41}
        ]
 
        var request;
        for (var item of bookList){
            request = objectStore.add(item);
            request.onsuccess = function(event){
                console.log(event);
                console.log("数据存储成功");
            }
            request.onerror = function(event){
                console.log(event);
                console.log("数据存储失败。");
            }
        }
    }
</script>
</html>

在浏览器中看本地存储的indexedDB所存储的信息。

上述代码输出

相关推荐
Danta43 分钟前
百度网盘一面值得look：我有点难受🤧🤧
前端·javascript·面试
OpenTiny社区1 小时前
TinyVue v3.22.0 正式发布：深色模式上线！集成 UnoCSS 图标库！TypeScript 类型支持全面升级！
前端·vue.js·开源
dwqqw1 小时前
opencv图像库编程
前端·webpack·node.js
Captaincc2 小时前
为什么MCP火爆技术圈，普通用户却感觉不到？
前端·ai编程
海上彼尚2 小时前
使用Autocannon.js进行HTTP压测
开发语言·javascript·http
阿虎儿2 小时前
MCP
前端
layman05283 小时前
node.js 实战——（fs模块 知识点学习）
javascript·node.js
毕小宝3 小时前
编写一个网页版的音频播放器，AI 加持，So easy!
前端·javascript
万水千山走遍TML3 小时前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
Aphasia3113 小时前
react必备JS知识点（一）——判断this指向👆🏻
前端·javascript·react.js
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06DeepSeek各版本说明与优缺点分析07苍穹外卖面试总结08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09RAG 实践- Ollama+RagFlow 部署本地知识库10✨分享我在飞书多维表格中使用DeepSeek的经历✨