前端 IndexDB 操作入门教程

idb-js

基于indexdb本地数据库的封装

文档地址

安装：

    npm install idb-js --save

使用：

第一步：引入Idb

    import Idb from 'idb-js'  //  引入Idb

第二步：引入数据库配置

    import db_student_config from './db_student_config'

第三步：载入配置，数据库开启成功拿到数据库实例进行操作

    Idb(db_student_config).then(student_db => {...})

数据库实例db方法：

注意事项：

因为查询操作多条数据是采用游标方式，所以操作单条数据的时候建议采用主键或者索引的的方式效率更高
采用游标的方法时，其中condition需要返回条件（很多小伙伴忽略了这点，特别说明^-^）

数据库与表（store）：

方法	方法名	参数	参数属性
close_db	关闭数据库	空	-
delete_db	删除数据库	空	-
clear_table	清空某张表的数据	{Object}	tableName {String} 表名（required）

添加（insert）：

方法	方法名	参数	参数属性
insert	添加单条或者多条数据	{ Object}	tableName {String} 表名（required）
			data {Object \| Array} 添加的值（required）
			success {Function} 添加成功的回调

查询（query）：

方法	方法名	参数	参数属性
query	查询匹配到的数据（可查询多条数据,游标）	{Object}	tableName {String} 表名（required）
			condition {Function} 匹配条件（required）
			success {Function} 查询成功的回调 @arg {Array} 接收结果
query_by_primaryKey	通过主键查询某条数据	{Object}	tableName {String} 表名（required）
			target { String \| Number } 主键值（required）
			success {Function} 查询成功的回调 @arg {Array} 接收结果
query_by_index	通过索引查询某条数据（数据库必须建立了索引）	{Object}	tableName {String} 表名（required）
			indexName { String } 目标索引（required）
			target { String \| Number } 目标索引值（required）
			success {Function} 查询成功的回调 @arg {Array} 接收结果
queryAll	查询某张表的所有数据	{Object}	tableName {String} 表名（required）
			success {Function} 查询成功的回调 @arg {Array} 接收结果

删除（delete）：

方法	方法名	参数	参数属性
delete	删除数据（可删除多条数据，游标）	{Object}	tableName {String} 表名（required）
			condition {Function} 匹配条件（required）
			success {Function} 删除成功的回调
delete_by_primaryKey	通过主键删除某条数据	{Object}	tableName {String} 表名（required）
			target { String \| Number } 主键值（required）
			success {Function} 删除成功的回调 @arg {Null}

修改（update）：

方法	方法名	参数	参数属性
update	修改数据（可更改多条数据，游标）	{Object}	tableName {String} 表名（required）
			condition {Function} 匹配条件（required）
			handle {Function} 修改方式（required） @arg {Object} 修改项
			success {Function} 修改成功的回调 @arg {Array} 返回被修改后项
update_by_primaryKey	通过主键更改某条数据	{Object}	tableName {String} 表名（required）
			target { String \| Number } 主键值（required）
			handle {Function} 修改方式（required） @arg {Object} 修改项
			success {Function} 删除成功的回调 @arg {Object} 修改后的值

例子：

数据库配置：

    // in db_student_config.jsexport default {dbName: "student",                          // *数据库名称version: 1,                                 // 数据库版本号（默认为当前时间戳）tables: [                                   // *数据库的表，即ObjectStore{tableName: "grade",                 // *表名option: { keyPath: "id" },          // 表配置，即ObjectStore配置，此处指明主键为idindexs: [                           // 数据库索引（建议加上索引）{key: "id",                  // *索引名option:{                    // 索引配置，此处表示该字段不允许重复unique: true}},{key: "name"},{key: "score"}]},{tableName: "info",                      // *表名 另外一张表，同理option: { keyPath: "id" },indexs: [{key: "id",option:{unique: true}},{key: "name"},{key: "age"},{key: "sex"}]}]};

使用：

    // 载入数据配置，数据库开启成功后会拿到db来对数据库进行操作import Idb from 'idb-js'  //  引入Idbimport db_student_config from './db_student_config'   //  引入数据库配置Idb(db_student_config).then(student_db => {     //  载入配置，数据库开启成功后返回该数据库实例/*** @method close_db 关闭此数据库* */student_db.close_db();/*** @method delete_db 删除此数据库* */student_db.delete_db();/*** @method 增加单条数据* */student_db.insert({tableName: "grade",data: {id: 1,score: 98,name: "小明"},success: () => console.log("添加成功")});/*** @method 增加多条数据* */student_db.insert({tableName: "grade",data: [{id: 1,score: 98,name: "小明"},{id: 2,score: 99,name: "小方"}],success: () => console.log("添加成功")});/*** @method 查询数据（游标）* */student_db.query({tableName: "grade",condition: (item)=> item.score == 100,success: r => {console.log(r);}});/*** @method 修改数据* */student_db.update({tableName: "grade",condition:item => item.name == '小明',handle: r => {r.score = 80;},success: r => {console.log("修改成功", r);}});/*** @method 删除数据* */student_db.delete({tableName: "grade",condition: (item)=> item.name == '小明',success: (res) => {console.log("删除成功");}});/*** @method 查询某张表的所有数据* */student_db.queryAll({tableName: "grade",success: (res) => {console.log(res)}});/*** @method 根据主键查询某条数据* */student_db.query_by_primaryKey({tableName:'grade',target:1,success:(res)=>{console.log(res)}})/*** @method 根据索引查询某条数据* */student_db.query_by_index({tableName:'grade',indexName:'name',target:'小明',success:(res)=>{console.log(res)}})/*** @method 清空某张表的数据* */student_db.clear_table({tableName:'grade'})/*** @method 通过主键删除某条数据* */student_db.delete_by_primaryKey({tableName:'grade',target:1,success:()=>console.log('删除成功')})/*** @method 通过主键更改某条数据* */student_db.update_by_primaryKey({tableName: "grade",target: 1,handle: val => (val.score = 101),success: res => {console.log(res);}});},err => {console.log(err)});

前端 IndexDB 操作入门教程相关推荐

cad怎么向下位移,CAD基础操作入门教程，CAD怎么按坐标位移来移动对象的方法
CAD基础操作入门教程,CAD怎么按坐标位移来移动对象的方法 CAD绘图操作无疑是比较考验软件操作熟练以及创意设计思维的过程,作为cad设计师,软件熟练是基础也是根本,而创意思维是升华,关系着你的后期 ...
【前端】Angular8入门教程笔记+Angular material安装与使用
一. Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Goo ...
腾讯Web前端JX框架入门教程(一)
什么是JX框架 JX框架(Javascript eXtension tools)是模块化的非侵入式Web前端框架,适用于Web Page和Web App项目的开发,特别适合构建和组织大规模.工业级的W ...
flask 数据库操作入门教程（一把梭）
flask 数据库操作入门安装数据库 mysql8.0 下载后一直点击下一步,设置好root密码安装模块 pip install flask_sqlalchemy 连接数据库还需要自己创建一个数 ...
前端基础-VUE入门教程(一)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.VUE简介 1.1 搭建Vue开发环境 1.2 初始Vue 1.3 Vue模板语法 1.4 数据绑定 1.5 el ...
animate改变背景颜色_3D MAX2016视口背景设置里各参数的含义详解 - 3dmax基础操作入门教程-3dmax材质教程,3d材质贴图教程参数,vray材质参数,3dmax贴图教程...
3DMax2016视口背景设置参数的含义设置参数一:纯色纯色是投影视口的默认设置. 点击之后,将视口背景显示为设定好的纯色背景. 要自定义背景的纯色颜色,可以"自定义用户界面" ...
OpenHarmony JS 前端开发基础入门教程总结
1.应用开发目录介绍 common,公共文件主要存放图片,json等基础数据 components,自定义组件 pages.index,页面 app.js,入口 2.页面结构设计页面结构使用 HTM ...
Web前端开发入门教程，HTML5+CSS3+JS教程，达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
前端如何实现音乐盒胶盘的转动_郑州Web前端入门教程之如何实现图片优化？
统计数据显示,图片内容已经占据互联网内容总量的62%,因此想要优化网站性能,图片绝对是优化的热点和重点.图片优化是Web前端工程师必须要掌握的知识点,在接下来的郑州Web前端入门教程就给大家讲解一下如 ...

前端 IndexDB 操作入门教程

前端 IndexDB 操作入门教程

idb-js

安装：

使用：

数据库实例db方法：

注意事项：

数据库与表（store）：

添加（insert）：

查询（query）：

删除（delete）：

修改（update）：

例子：

数据库配置：

使用：

前端 IndexDB 操作入门教程相关推荐

最新文章

热门文章