前端大容量存储IndexedDB之Dexie.js

·  阅读 430
前端大容量存储IndexedDB之Dexie.js

这是我参与11月更文挑战的第1天,活动详情查看:2021最后一次更文挑战

1, 前言

随着浏览器的功能不断增强,越来越多的网站开始考虑将大量的数据存储在客户端,相比后端接口,获取数据更快一些。现有的浏览器存储方案都不适合存储大量的数据。Cookie的大小不超过4KB,而且每次请求都会发送到服务器,LocalStorage在2.5~10MB直接,浏览器不同,存储的大小还不一样,而且不提供搜索功能,也不能建立自定义索引,webSQL大家可以课外了解一下,因为Web SQL Database规范已经被废弃,官方文档也解释的很清楚,webSQL规范底层采用SQLite的SQL方言,而作为一个标准,这是不可接受的,每个浏览器都有自己的实现以后就很能统一标准了,就像IE一样。最后,也是最重要的一个客户端存储大量数据的方案:IndexedDB。

2, webSQL小结

(1) 创建一个数据库

var db = openDatabase('person', 1, 'person', 0)

第一个参数: 数据库的名称
第二个参数: 版本号
第三个参数: 备注
第三个参数: 大小,默认是5M
复制代码

(2)创建一个表

db.transaction(tx => { 
   tx.executeSql('create table if not exists student(id unique, name)') 
})
复制代码

(3) 插入两条数据

db.transaction(tx => { 
   tx.executeSql('insert into student (id, name) value(?, ?)', [1, '张三']);         
   tx.executeSql('insert into student (id, name) value (?, ?)', [2, '李四']);
})
复制代码

(4)查询数据

db.transaction(tx => {
   tx.executeSql('select * from student', [], (tx, res) => {
      let rows = res.rows;
      let len = rows.length
      for (var i=0; i< len, i++) {
         console.log(rows.item(i))
      }
   })
})
复制代码

总结

  • webSQL标准不再更新,关系型数据库,底层 sqlite
  • chrome中容量5M, 支持同域名不同页面共享
  • 版本参数用于控制,如果打开版本与现有版本不一致,则报错

3, IndexedDB存储

IndexedDB不属于关系型数据库,不支持SQL查询语句,更接近NoSQL数据库,是一个基于事务操作的key-value型前端数据库。它的大部分API都是异步的。

  • 键值对存储

    IndexedDB内部采用对象仓库存放数据,所有类型的数据都可以直接存放,包括JavaScript对象,每一个数据记录都有对应的主键,主键是独一无二的,不能重复

  • 异步

    IndexedDB操作时不会锁死浏览器,用户依然可以进行其他操作,它所有的API都是异步操作,异步设计时为零防止大量数据的读写拖慢网页的表现。

  • 支持事务(transaction)

    支持事务就意味着:在操作(增删改查)的过程中,只要有异步失败了,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。

  • 同源限制

    每一个数据库对应创建它的域名,网页只能访问自身域名下的数据库,而不能访问跨域名的数据库

  • 存储空间大

    IndexedDB的存储空间一般来说不少于250M,甚至没有上限

1,IndexedDB常用概念

IndexedDB是一个比较复杂的API,它把不同的实体抽象成一个个对象接口。

*数据库     IDBDatabase 对象
*对象仓库   IDBObjectStore 对象, 类似于关系型数据库中的表
*索引      IDBIndex 对象
*事务      IDBTransaction 对象
*操作请求   IDBRequest 对象
*指针      IDBCursor 对象
*主键集合   IDBKeyRange 对象
复制代码

注意: IndexedDB数据库有版本的概念,同一时刻,只能有一个版本的数据库存在,如果要修改数据库结构,只能通过升级数据库版本完成,每一个数据库包含若干个对象仓库,也可以理解为:每一个数据库可以创建多个表, 为了加速数据的检索,可以在对象仓库里面建立索引。

注意:事务

数据记录的读写和删改,都要通过事务完成,事务对象提供了三个回调事件

onerror onsuccess onupgradeneeded

2, 操作流程

(1) 打开数据库

使用IndexedDB的第一步就是打开数据库,使用indexedDB.open()方法

var IDBRequest = window.indexedDB.open(databaseName, version)
复制代码

第一个参数: 数据库名称, 如果数据库不存在就会创建

第二个参数:表示数据库的版本,如果省略,默认为当前版本,默认为:1

结果indexedDB.open()方法返回一个IDBRequest对象,通过三种事件error, success, upgradeneeded, 处理打开的数据库。

  • onerror 事件表示打开数据库失败

    IDBRequeset.onerror = funciton(event) {
       console.log('数据库打开失败')
    }
    复制代码
  • onsuccess事件表示打开数据库成功

    var db
    IDBRequeset.onsuccess = function(event) {
       db = IDBRequeset.result
       console.log('数据库打开成功')
    }
    复制代码
  • upgrade needed事件表示:如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded

    var db;
    IDBRequeset.onupgradeneeded = function(event) {
        db = event.target.result
    }
    复制代码

(2) 新建数据库

新建数据库和打开数据库是同一个操作, 如果指定打开的数据库不存在,就会新建,因为是新建,这时版本号从无到有,是一个升级过程,所以会触发onupgradeneeded事件,后续的操作都在这个回调里面执行

IDBRequest.onupgradeneeded = function(event) {
  db = event.target.result // 拿到数据库实例
  // 判断表格是否存在
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {
    objectStore = db.createOjbectStore('person', { keyPath: 'id'})
  }
}
复制代码

没有id,也可以让IndexedDB自动设置主键

objectStore = db.createOjbectStore('person', { autoIncrement: true })
复制代码

下一步就可以直接创建索引

objectStore.createIndex('name', 'name', { unique: false})
复制代码

(3)新增数据

新增数据指的是想对象仓库中写入数据记录,需要通过事务完成

function add() {
   var request = db.transaction(['person'], 'readwrite')
           .objectStore('person')
           .add({ id: 1, name: 'zlm', age: 24, email: '2396307772@qq.com'});
       request.onsuccess = function (event) {
            console.log('写入数据成功', event)
        };
       request.onerror = function (event) {
            console.log('写入数据失败',event)
       }
  }
复制代码

解读: 添加一个数据,需要新建一个事务,通过 transaction()方法。 第一个参数:指定表格名称, 第二个参数:操作模式,只读或者读写。新建事务完成之后,通过objectStore()方法拿到对象仓库,也就是表格对象,一个参数: 表格名称。最后在通过表格对象的add()方法, 向表格中写入一条记录

(4) 读取数据

读取数据也是通过事务完成

function read() {
       var transaction = db.transaction['person'];
       var objectStore = transaction.objectStore('person')
       var request = objectStore.get(1)
           request.onerror = function (event) {
               console.log('读取事务失败',event)
           }
           request.onsuccess = function (event) {
               if (request.result) {
                   console.log('Name', + request.result.name)
                   console.log('Age', + request.result.age)
                   console.log('Email', + request.result.email)
               } else {
                   console.log('未获取数据记录')
               }
               console.log('读取成功事件', event)
           }
    }
复制代码

(5) 遍历数据

遍历表格中的所有数据,使用指针对象IDBCursor

function readAll() {
     var objectStore = db.transaction('person').objectStore('person')
         objectStore.opneCursor().onsuccess = function(event) {
           var cursor = event.target.result
           if (cursor) {
             console.log('ID: ' + cursor.key)
             console.log("Name: " + cursor.value.name)
             console.log("Age: " + cursor.value.age)
             console.log('Email: ' + cursor.value.name)
             cursor.continue()
           } else {
             console.log('没有获取到更多的数据')
           }
         }
    } 
复制代码

(6)更新数据

更新数据要使用IDBObject.put()方法

function update() {
  var request = db.transaction(['person'], 'readwrite')
           .objectStore('person')
           .put({ id: 1, name: '张四', age: 32, email: '239630772@qq.com'})
      request.onsuccess = function (event) {
           console.log('更新数据成功', event)
      }
      request.onerror = function (event) {
           console.log('没有获取到更多的数据', event)
      }
  }
复制代码

(7) 删除数据

使用IDBObjectStore.delete()方法

function remove() {
        var request = db.transaction(['person'])
                        .objectStore('person')
                        .delete(1)
            request.onsuccess = function (event) {
                console.log('删除数据成功', event)
            } 
    }
复制代码

(8)索引

索引的意义在于:可以让你搜索任意字段,通过任意字段拿到数据记录,如果不建立索引,只能通过搜索主键

  • 新建表格的时候,对name字段添加索引

    objectStore.createIndex('name', 'name', {unique: false})
    复制代码
  • 通过name找到对应的数据记录

    var transaction = db.transaction(['person'], 'readonly')
    var store = transaction.objectStore('person')
    var index = store.index('name')
    var request = index.get('zlm')
    request.onsuccess = function(event) {
       var result = event.target.result
       if(result) {
           console.log('获取到数据')
       } else {
           console.log('没有获取数据')
       }
    }
    复制代码

下面是自己的测试Demo.js

/**
 * IDBDatabase 数据库
 * IDBObjectStore 对象仓库
 * IDBIndex 索引
 * IDBTransaction 事务
 * IDBRequest 操作请求
 * IDBCursor 指针
 * IDBKeyRang 主键集合
 */
// ! 打开数据库
var db;
var request =  window.indexedDB.open('myIndexDB');
    request.onerror =  function (event) {
        console.log('打开数据库报错', event)
    }
    request.onsuccess = function (event) {
        db = request.result
        console.log('数据库打开成功', event)
    }
    // 如果制定的版本,大于数据库的实际版本号,机会发生数据库升级事件
    request.onupgradeneeded = function (event) {
        db = event.target.result
        console.log('数据库升级事件')
        var objectStore;
        if (!db.objectStoreName.contains('person')) {
            objectStore = db.createObjectStore('person', { keyPath: 'id'})
            objectStore.createIndex('name', 'name', { unique: true})
            objectStore.createIndex('email', 'email', { unique: true})
        }
        console.log(objectStore)
    }
console.log(db)

// 新增数据
function add() {
        var request = db.transaction(['person'], 'readwrite')
                      .objectStore('person')
                      .add({ id: 1, name: '张三', age: 24, email: 'xx@xx.x.cn'});
            request.onsuccess = function (event) {
                console.log('写入数据成功', event)
            };
            request.onerror = function (event) {
                console.log('写入数据失败',event)
            }
    }

// 读取数据
    function read() {
       var transaction = db.transaction['person'];
       var objectStore = transaction.objectStore('person')
       var request = objectStore.get(1)
           request.onerror = function (event) {
               console.log('读取事务失败',event)
           }
           request.onsuccess = function (event) {
               if (request.result) {
                   console.log('Name', + request.result.name)
               } else {
                   console.log('未获取数据记录')
               }
               console.log('读取成功事件', event)
           }
    }

    // 遍历数据表格中所有的数据,要使用指针对象IDBCursor
    function readAll() {
        var objectStore = db.transaction('person').objectStore('person')
            objectStore.opneCursor().onsuccess = function(event) {
                 var cursor = event.target.result
                 if (cursor) {
                     console.log('ID: ' + cursor.key)
                     console.log("Name: " + cursor.value.name)
                     cursor.continue()
                 } else {
                     console.log('没有获取到更多的数据')
                 }
            }
    } 

// 更新数据
    function update() {
        var request = db.transaction(['person'], 'readwrite')
                        .objectStore('person')
                        .put({ id: 1, name: '张四', age: 32, email: 'xx@qq.com'})
            request.onsuccess = function (event) {
                console.log('更新数据成功', event)
            }
            request.onerror = function (event) {
                console.log('没有获取到更多的数据', event)
            }
    }

// 删除数据
    function remove() {
        var request = db.transaction(['person'])
                        .objectStore('person')
                        .delete(1)
            request.onsuccess = function (event) {
                console.log('删除数据成功', event)
            } 
    }
复制代码

4, 实战操作

神游一番之后,发现indexedDB很多人进行过封装,对比一番发现:

Dexie.js 对IndexedDB的封装,语法简单,可以快速方便的编写代码

总结:dexie.js是一个对浏览器indexedDB的包装库,让我们操作indexedDB更方便。

(1) 为什么要使用dexie.js

  • 原生的IndexedDB操作都是在回调中进行的
  • 原生所有的操作都需要不断的创建事务,判断表和索引的存在
  • 原生不支持批量操作
  • 原生的错误需要在每一个失败回调中处理

而对比dexie.js, 支持链式调用,索引定义方便,而且支持多值索引和复合索引,而且文档完善

dexie官网文档

(1)安装

npm  install dexie
复制代码

或者

<script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
复制代码

(2)使用

步骤一:获取一个数据库实例

import Dexie from 'dexie';
var db = new Dexie('数据库名称')
复制代码

步骤二: 定义表结构

db.version(1).stores({
    users: "++id, name, age, emial",
    students: "++id, &username",
    books: "id, author, name, *categories"
})
复制代码

注意:1 如果属性前面有++符合, 说明是自增的主键

注意:2 如果字段前面有&符合,说明是唯一索引

注意:3 如果字段前面有*符合,说明该字段是多值索引

符合描述
++自动递增主键
&唯一主键
*多值索引
+复合索引

(3) 查询

所有where 子句运算符都可用于查询多条目索引对象,

  • above() 返回指定字段的值大于某个值的所有记录

  • aboveOrEqual() 返回指定字段值大于等于某个值的所有记录

  • anyOf() 返回数据集中包含在给定数组中的记录

  • below() 返回指定字段的值小于某个值的所有记录

  • belowOrEqual() 返回指定字段值小于等于某个值的所有记录

  • between() 返回介于两者之间的记录

  • equals() 等于

    详细的大家可以参考官网文档

    Dexie官网API文档

下面是自己测试的Demo.html

<!doctype html>
<html>
  <head>
      <script src="https://unpkg.com/dexie@latest/dist/dexie.js"></script>
      <script>
          // 创建数据库病拿到实例化对象
        async function openIDB() {
            var db = new Dexie("MyDatabase");
                db.version(1).stores({
                    tasks: '++id, name, age, email'
                });
                // 增加数据
                db.tasks.add({
                    name: 'zlm',
                    age: 22,
                    email: 'xxx@xx.com.cn'
                })
                db.tasks.add({
                    name: '张三',
                    age: 18,
                    email: 'xxxx@xx.com.cn'
                })
                // 修改数据
                db.tasks.put({
                    id: 2,
                    name: '李四',
                    age: 100,
                    email: ''
                })
                // 查询数据
                console.log('查询第一条数据')
                const oldTask = await db.tasks.get(1)
                console.log(oldTask)
                // 高级查询,查询所有ID大于0的
                const allTask = await db.tasks.where('id').above(0).toArray()
                console.log('查询所有的数据')
                console.log(allTask)
                // 批量获取数据
                const bulkgetData = await db.tasks.bulkGet([1,2,3,4])
                console.log('批量数据')
                console.log(bulkgetData)
                // db.tasks.clear()
        }
        openIDB()  
      </script>
  </head>
</html>
复制代码
分类:
前端
标签:
分类:
前端
标签: