当前位置： 首页 > article >正文

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

article 2024/12/23 12:29:21

一、背景

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对象

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

打开数据库对象

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

给请求对象设置监听事件，该对象可以设置三种监听事件，success、error 以及 onupgradeneeded。
success 是请求成功所要执行的监听事件。
error 是请求失败后所要执行的监听事件。
onupgradeneeded 是版本升级之后所要执行的监听事件。版本升级怎么判定：上述打开数据库函数接收了一个数据库版本号DBversion，该参数与之前的值不同就表示要升级。

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(“版本更新”);
}

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

var store = db.createObjectStore(name,option);   //返回仓库对象

这里面的option包含两个选项，一个是keyPath、一个是autoIncrement。
keyPath：键路径，类似mysql中的主键。
autoIncrement：是否自增长。

db.deleteObjectStore(name)     //删除仓库

创建索引

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

判断仓库是否存在

db.objectStoreNames.contains(“books”);

indexedDB 事务
事务模式
readonly：只读访问，在查询对象存储时使用。
readwrite：提供对某个对象存储的读取和写入访问权。
versionchange：提供读取和写入访问权来修改对象存储定义，或者创建一个新的对象存储。

var transaction = db.transaction(“books”,”readwrite”); //为一个对象仓库创建一个读写事务
//从事务获取对象仓库
var objectStore = transaction.objectStore(“books”);   //事务获取对象仓库

为仓库添加监听事件
abort：事务中断
complete：事务完成
error：事务出错

var transaction = db.transaction(“books”,”readwrite”);
transaction.oncomplete = function(event){
    
}
transaction.onerror = function(event){
    
}
transaction.onbort = function(event){

}

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

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

事件监听

request.onerror = function(event){}
request.onsuccess = function(event){}

游标遍历

//游标遍历的打开可以通过利用对象仓库（根据主键，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使用）

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) //包括

思维导图

在这里插入图片描述

四、例子讲解

<!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所存储的信息。
在这里插入图片描述
上述代码输出
在这里插入图片描述


http://www.kler.cn/a/447892.html

相关文章：

  • 重拾设计模式--建造者模式
  • 你的第一个博客-第一弹
  • 【C++11】可变模板参数
  • golang断言
  • linux---多线程
  • 【前后端】HTTP网络传输协议
  • Sourcegraph 概述
  • Redis篇--常见问题篇8--缓存一致性3（注解式缓存Spring Cache）
  • opencv项目--文档扫描
  • 3.metagpt中的软件公司智能体 (Architect 角色)
  • 纯血鸿蒙APP实战开发——文字展开收起案例
  • C# cad启动自动加载启动插件、类库编译 多个dll合并为一个
  • 图解HTTP-HTTP协议
  • 反归一化 from sklearn.preprocessing import MinMaxScaler
  • 2024年最新多目标优化算法：多目标麋鹿群优化算法（MOEHO）求解DTLZ1-DTLZ7及工程应用---盘式制动器设计，提供完整MATLAB代码
  • iframe和浏览器页签切换
  • 解决uniapp中使用axios在真机和模拟器下请求报错问题
  • 亚马逊API接口深度解析：如何高效获取商品详情与评论数据
  • 洛谷 P1644 跳马问题 C语言
  • （耗时4天制作）详细介绍macOS系统 本博文含有全英版 （全文翻译稿）
  • 【NLP 16、实践 ③ 找出特定字符在字符串中的位置】
  • 2024.12 迈向可解释和可解释的多模态大型语言模型：一项综合调查
  • JDK13主要特性
  • Mysql复习（一）
  • 【唐叔学算法】第18天：解密选择排序的双重魅力-直接选择排序与堆排序的Java实现及性能剖析
  • 前端知识补充—CSS