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

一、背景

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

上述代码输出

相关推荐
cwj&xyp2 小时前
Python(二)str、list、tuple、dict、set
前端·python·算法
dlnu20152506222 小时前
ssr实现方案
前端·javascript·ssr
古木20192 小时前
前端面试宝典
前端·面试·职场和发展
轻口味3 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王4 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发4 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀4 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪5 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef6 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端