web建站教程
  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. 更多
    php入门
    nodejs
    mockjs
    reactjs
    mysql
    wordpress
    织梦cms
    帝国cms
    git教程
    IT知识
    模板大全
    休息站

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

556 ℃
     

在现在开发中,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官网

一款专门为小程序开发而生的插件——weapp-tailwindcs

推荐一款2023年最火的前端开源项目——Shadcn-UI

推荐一款基于ThinkPHP8和Vue3的后台管理系统——BuildAdmin

推荐一款由支付宝小程序官方推出的免费开源UI组件库——Ant Design Mini

推荐一款免费开源的JavaScript读取、显示PDF文档的工具库——PDF.js

标签: Dexie.js, javaScript调用, js工具库, 免费开源工具库, 前端开源项目, 前端资源

上面是“推荐一款浏览器数据库的开源工具库——Dexie.js(JavaScript调用)”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://ipkd.cn/webs_13526.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

当前位置: 网站首页 > 前端知识
本文共计2028个字,预计阅读时长14分钟
生活小工具,收录了80多款小工具
上一篇: 推荐一款由字制区设计团队的免费综艺字体——字制区喜脉体
下一篇: 推荐一款免费开源的跨平台MarkDown编辑器——Mark Text
x 打工人ai神器