推荐一款浏览器数据库的开源工具库——Dexie.js（JavaScript调用）

在现在开发中，LocalStorage 已经满足不了这些本地储存的需求了，很多开发者看向了 IndexedDB ，这是一种可以本地存储大量数据的方法。但是直接使用 IndexedDB API，非常麻烦，需要写很多代码，下面web建站小编给大家介绍一个很好用的工具——Dexie.js。

Dexie.js免费开源说明

Dexie.js 是一个免费开源的 JS 工具库，源码采用 Apache 2.0 协议托管在 Github 上，任何人都可以免费下载来使用。

Dexie.js 技术特性介绍

1、数据更容易管理：Dexie.js提供了一个简洁的API，方便我们创建、打开、查询和管理IndexedDB数据库。我们不仅可以定义数据模式，包括表和索引，还可以随着web项目的开发和迭代方便地更新数据库版本。

2、Promise 异步支持：和IndexedDB原生API一样，Dexie.js的操作也是异步的，它使用Promise来处理异步操作。可以在数据库操作之后直接执行，使用then()方法处理结果，或者使用async/await语法更清晰地处理异步操作。编写和维护代码是非常优雅的。

3、数据查询：Dexie.js支持复杂的查询操作，包括过滤、排序、范围查询等。完全不需要写那些底层的IndexedDB代码，数据检索和处理非常优雅灵活。

4、浏览器兼容性好：Dexie.js支持主流的现代浏览器，包括Chrome、Firefox、Edge、Safari等。，而且手机也得到了很多支持，不用担心兼容性问题。

5、轻量级：Dexie.js是一个轻量级的库，体积小，加载速度快，没有其他依赖。

Dexie.js 用法介绍

1. 安装 Dexie.js

我们可以从 CDN 引入 js 文件，也可以使用 npm 或 yarn 来进行安装。下面使用 npm：

npm install dexie

2. 创建数据库

// 导入Dexie库
import Dexie from 'dexie';

// 创建一个数据库实例
const db = new Dexie('testDatabase');

3. 定义数据表格

db.version(1).stores({
  friends: '++id, name, age'
});

在这段代码创建了一个名为 friends 的表格，包含自动生成的 id 字段、name 字段和 age 字段。其中 ++id 表示 id 字段自动递增。

4. 插入数据

db.friends.add({ name: '张三', age: 30 });
db.friends.add({ name: '李四', age: 25 });

5. 查询数据

db.friends
  .where('age')
  .above(28)
  .toArray()
  .then(friends => {
    console.log('超过28岁的朋友:', friends);
  });

配合Vue等框架使用

<template>
    <h2>Friends</h2>
    <ul>
      <li v-for="friend in friends" :key="friend.id">
        {{ friend.name }}, {{ friend.age }}
      </li>
    </ul>  
  </template>
  <script>
    import { liveQuery } from "dexie";
    import { db } from "../db";
    import { useObservable } from "@vueuse/rxjs";
    
    export default {
      name: "FriendList",
      setup() {
        return {
          friends: useObservable(
            liveQuery(async () => {
              //
              // Query the DB using our promise based API.
              // The end result will magically become
              // observable.
              //
              return await db.friends
                .where("age")
                .between(18, 65)
                .toArray();      
            })
          )
        };
      }
    };
  </script>

配合React使用

import { useLiveQuery } from "dexie-react-hooks";
  import { db } from "./db";

  export function FriendList () {
    const friends = useLiveQuery(async () => {
      //
      // Query the DB using our promise based API.
      // The end result will magically become
      // observable.
      //
      return await db.friends
        .where("age")
        .between(18, 65)
        .toArray();
    });

    return <>
      <h2>Friends</h2>
      <ul>
        {
          friends?.map(friend =>
            <li key={friend.id}>
              {friend.name}, {friend.age}
            </li>
          )
        }
      </ul>
    </>;
  }

进入Dexie.js官网