【前端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所存储的信息。

上述代码输出

相关推荐
再学一点就睡12 分钟前
Cookie、LocalStorage 和 SessionStorage 的全面解析
前端
余人于RenYu22 分钟前
前端插件使用汇总
前端·javascript
语落心生27 分钟前
陈年旧事: 基于JS的三维光学引擎
javascript
2301_7891695436 分钟前
前端对接下载文件接口、对接dart app
前端
Liudef0643 分钟前
deepseek v3-0324实现SVG 编辑器
开发语言·javascript·编辑器·deepseek
邴越1 小时前
OpenAI Function Calling 函数调用能力与外部交互
开发语言·前端·javascript
uhakadotcom1 小时前
React 和 Next.js 的基础知识对比
前端·面试·github
Billy Qin1 小时前
Tree - Shaking
前端·javascript·vue.js
Theodore_10221 小时前
ES6（8） Fetch API 详解
开发语言·前端·javascript·ecmascript·es6
月明长歌1 小时前
Vue + Axios + Mock.js 全链路实操：从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】