Vue:调用浏览器数据库

在前一段时间写项目的时候,需要本地存储大量数据,需要在客户端进行数据存储离线访问以及数据同步等,对本地数据的储存和管理非常重要。因此考虑使用了IndexedDB,但是接使用 IndexedDB API ,非常麻烦,需要写很多代码。而且非常怀念简单LocalStorage

Dexie.js这是一个强大、简单的 JavaScript 库,它对 IndexedDB 进行了封装,让我可以很轻松地管理浏览器端的数据。访问地址

Dexie.js 技术特性

数据更容易管理

Dexie.js 提供简洁的 API,让我们可以轻松创建、打开、查询和管理 IndexedDB 数据库。我们不仅可以定义数据模式,包括表格和索引,而且随着 web 项目的发展迭代,还可以方便地进行数据库版本升级。

Promise 异步支持

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

数据查询

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

浏览器兼容性好

Dexie.js 支持主流的现代浏览器,包括 Chrome、Firefox、Edge 和 Safari 等,手机端上也得到了很多的支持,不用担心兼容性问题。

轻量级

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

1.安装

npm install dexie

2.创建数据库 

// 导入Dexie库

import Dexie from 'dexie';

// 创建一个数据库实例

const db = new Dexie('testDatabase'); 

3.定义数据表格 

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

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); });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/620412.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习笔记-python文件基本操作

1.文件的基本操作 open()打开函数 语法 : open(name,mode) name:是要打开的目标文件名的字符串(可以包含文件所在的具体路径)。 mode:设置打开文件的模式(访问模式):只读、写入、追加等。 # 打开文件open(): 如果报FileNotFoundError,文件路…

【Python】数据可视化--基于TMDB_5000_Movie数据集

一、数据准备 tmdb_5000_movie数据集下载 二、数据预处理 观察数据集合情况 import pandas as pd import ast import warnings warnings.filterwarnings(ignore) # 加载数据集 df pd.read_csv(tmdb_5000_movies.csv) # 查看数据集信息 print(df.info()) 由于原数据集包含的…

Jenkins集成Sonar Qube

下载插件 重启Jenkins 容器 sonarqube 使用令牌 Jenkins 配置 重新构建

小程序基础学习(多插槽)

先创建插槽 定义多插槽的每一个插槽的属性 在js文件中启用多插槽 在页面使用多插槽 组件代码 <!--components/my-slots/my-slots.wxml--><view class"container"><view class"left"> <slot name"left" ></slot>&…

YOLOv8改进 | 注意力篇 | 实现级联群体注意力机制CGAttention (全网首发)

一、本文介绍 本文给大家带来的改进机制是实现级联群体注意力机制CascadedGroupAttention,其主要思想为增强输入到注意力头的特征的多样性。与以前的自注意力不同,它为每个头提供不同的输入分割,并跨头级联输出特征。这种方法不仅减少了多头注意力中的计算冗余,而且通过增…

八爪鱼拉拉手

欢迎来到程序小院 八爪鱼拉拉手 玩法&#xff1a;点击鼠标左键拖动移动八爪鱼&#xff0c;当他的手很忙的时候他会很高兴&#xff0c; 不同关卡不同的八爪鱼的位置摆放&#xff0c;快去闯关吧^^。开始游戏https://www.ormcc.com/play/gameStart/248 html <div id"gam…

GCC工具源码编译

文章目录 背景一、下载源码二、编译前依赖准备2.1 相关工具依赖2.2 相关lib&#xff08;gmp/ mpfr /mpc&#xff09;依赖2.2.1 lib源码下载2.2.2 lib源码编译 三、编译GCC3.1 编译3.2 链接 四、报错处理 背景 日常可能涉及到系统里自带GCC版本与被编译源码存在不兼容&#xff…

【MySQL】巧用 Dense_Rank 窗口函数

力扣题 1、题目地址 2084. 为订单类型为 0 的客户删除类型为 1 的订单 2、模拟表 活动表&#xff1a;Orders Column NameTypeorder_idintcustomer_idintorder_typeint order_id是此表的主键列。此表的每一行都表示订单的ID、订购该订单的客户的ID以及订单类型。订单可以是…

大模型背景下计算机视觉年终思考小结(一)

1. 引言 在过去的十年里&#xff0c;出现了许多涉及计算机视觉的项目&#xff0c;举例如下&#xff1a; 使用射线图像和其他医学图像领域的医学诊断应用使用卫星图像分析建筑物和土地利用率相关应用各种环境下的目标检测和跟踪&#xff0c;如交通流统计、自然环境垃圾检测估计…

JavaScript系列——Proxy(代理)

文章目录 概要Proxy 语法handler 对象的方法Proxy 示例常用handler 对象的方法的参数handler.get()语法示例 handler.set()语法示例 使用场景验证值修正及附加属性 小结 概要 Proxy 用于创建一个对象的代理&#xff0c;将对原对象上的操作&#xff08;属性获取、赋值、函数调用…

【SSM框架】初识Spring

初识Spring Spring家族 Spring发展到今天已经形成了一种开发的生态圈&#xff0c;Spring提供了若千个项目&#xff0c;每个项目用于完成特定的功能 ✅Spring Framework&#xff08;底层框架&#xff09;Spring Boot&#xff08;提高开发速度&#xff09;Spring Cloud&#xf…

第1课 ROS 系统介绍

1.ROS操作系统介绍 在学习ROS 系统前&#xff0c;我们需要先了解操作系统的定义。操作系统&#xff0c;顾名思义&#xff0c;即提供部分软件和硬件的接口&#xff0c;以供用户直接使用。因此&#xff0c;针对不同的平台、不同的功能&#xff0c;需要采用不同的操作系统来完成底…

C++ 具名要求-全库范围的概念 - 函数对象 (FunctionObject) ,对于不同输入值产生相同输出具有很低概率-散列(hash)

此页面中列出的具名要求&#xff0c;是 C 标准的规范性文本中使用的具名要求&#xff0c;用于定义标准库的期待。 某些具名要求在 C20 中正在以概念语言特性进行形式化。在那之前&#xff0c;确保以满足这些要求的模板实参实例化标准库模板是程序员的重担。若不这么做&#xf…

智能导诊-医院信息化建设标准

智能导诊系统主要依赖于自然语言处理和机器学习等技术。患者可以通过语音、文字等方式描述病情&#xff0c;系统通过自然语言处理技术对病情进行语义分析和理解。随后&#xff0c;机器学习算法对患者的症状和病情进行推理&#xff0c;结合已有的疾病知识库&#xff0c;为患者提…

canvas设置图形图案、文字图案

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

强化学习应用(二):基于Q-learning的物流配送路径规划研究(提供Python代码)

一、Q-learning算法简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是使用一个Q值函数来估计每…

AI大模型学习笔记一

一、商业观点&#xff1a;企业借助大模型获得业务增长可能 二、底层原理&#xff1a;transformer 1&#xff09;备注 ①下面每个步骤都是自回归的过程&#xff08;aotu-regressive&#xff09;&#xff1a;已输出内容的每个字作为输入&#xff0c;一起生成下一个字 ②合起来就…

华为OD机试2024年最新题库(Java)

我是一名软件开发培训机构老师&#xff0c;我的学生已经有上百人通过了华为OD机试&#xff0c;学生们每次考完试&#xff0c;会把题目拿出来一起交流分享。 重要&#xff1a;2024年1月-5月&#xff0c;考的都是OD统一考试&#xff08;C卷&#xff09;&#xff0c;题库已经整理…

8-docker-compose命令操作容器报“no configuration file provided: not found”

1.问题描述 docker-compose命令操作容器时,有时会报出“no configuration file provided: not found”问题 [root@centos79 opt]# docker-compose ps no configuration file provided: not found [root@centos79 opt]# 2.解决方案 最常见的原因是没有在docker-compose.yml文…

Promise高级版 - 通过输出题理解「Promise源码」

1 Promise源码分析 Promise的基本工作原理 Promise构造函数&#xff1a;Promise构造函数接受一个执行器函数作为参数&#xff0c;该函数有两个参数&#xff1a;resolve和reject。在构造函数内部&#xff0c;会创建一个Promise实例&#xff0c;并初始化其状态为pending。 状态…