Web开发学习笔记:Ionic4使用SQLite数据库,将查询结果动态转为数组

Ionic Storage 深度解析:SQLite与IndexedDB跨平台持久化原理 在混合应用开发中,客户端数据持久化是离线能力的核心基础。SQLite作为嵌入式数据库代表,提供ACID事务与本地文件级可靠性;IndexedDB则是Web标准下的键值型存储方案,依赖浏览器实现。二者在Ionic框架中通过Storage抽象层统一接入,但实际行为受平台、WebView版本、权限模型深度影响。理解其驱动加载优先级、错误归一化机制、物理路径策略及WAL日志行为,是保障购物车、历史记录、人事档案等关键数据不丢失的前提。本文聚焦Ionic 2+中@ionic/storage的真实工作链路,结合adb调 阅读详情

以下代码使用vsCode+TypeScript编写

1.定义数据查询方法

 /**
   * 数据表数据查询
   * @param tableName 类型:string 查询数据的数据表名称
   * @param sqlParam 类型:Array<any> 拼接SQLWHERE条件语句需要的参数信息
   * @param selectCol 类型:string 查询结果列(可选参数,参数如果不传值则默认为 * )
   */
  SelectData(tableName: string, sqlParam: Array<any> , selectCol?: string) {
    this.dataBase.transaction((tx) => {
      let selectSql = ' SELECT ';
      let sqlWhere = ' WHERE 1=1 ';
      sqlParam.forEach(item => {
        if (isNumber(item.colValue)) { // 判断值是否为数值类型
          sqlWhere += ' AND ' + item.colName + '=' + item.colValue ;
        } else if (isString(item.colValue)) { // 判断值是否为字符类型
          sqlWhere += ' AND ' + item.colName + '=\''  + item.colValue + '\'' ;
        }
      });
      console.log('selectCol参数值: ' + selectCol);
      if (selectCol === undefined) {
        selectCol = '*';
      }
      selectSql += selectCol + ' FROM ' + tableName + sqlWhere;
      console.log('查询SQL: ' + selectSql);
      // 执行SQL并返回结果
      tx.executeSql(selectSql, [], ( tx, result) => {// 成功回调
        this.tableStructureInfo.MONEY_USEINFO.MerageFrom(result);
      }, (error) => {// 失败回调
        console.log('数据库操作失败: ' + error.message);
      });
    });
  }

 

2.将数据表定义为一个类中的对象,并定义一个将查询结果转数组的MerageFrom方法

/**
 * 数据表结构信息
 */
export class TableStructureInfo {
    /**
     * MONEY_USEINFO 记账信息表
     */
    public MONEY_USEINFO: any = {
        /**
         * 表中列信息
         */
        Columns: [
            ' REC_CREATEOR'
            , 'REC_CREATE_TIME'
            , 'REC_MODIFIER'
            , 'REC_MODIFY_TIME'
            , 'SEQ_NO'
            , 'MONEY_USE_TIME'
            , 'MONEY_UST_TYPE'
            , 'AMOUNT'
            , 'MONEY_USE_DESC'
            , 'BACK1'
            , 'BACK2'
            , 'BACK3'
            , 'BACK4'
            , 'BACK5'
            , 'BACK6'
            , 'BACK7'
            , 'BACK8'
            , 'BACK9'
            , 'BACK10'],
        /**
         * 结果集
         */
        DataTable: [],
        Row: {}, // 将row定义为一个对象
        /**
         * 将查询结果转为一个数组类似DataTable
         */
        MerageFrom: (data: any) => {
            if (data.rows.length > 0) {
                let rowCount = 0;
                for (const item of data.rows) {
                    rowCount++;
                    console.log('当前为第:' + rowCount + '次循环');
                    this.MONEY_USEINFO.Row = {}; // 重置对象方便下一次循环从头开始添加对象属性
                    for (const column of this.MONEY_USEINFO.Columns) {
                        if (item[column] !== undefined && item[column] !== null) {
                            // 通过查找当前column在对象中是否存在,如果存在则直接赋值,不存在则会自动新增再赋值
                            this.MONEY_USEINFO.Row[column] =  item[column];
                        }
                    }
                    this.MONEY_USEINFO.DataTable.push( this.MONEY_USEINFO.Row ); // 直接将对象压入数组中
                }
                console.log('当前DataTable对象:', this.MONEY_USEINFO.DataTable);
            }
        }
    };
}

 

效果:

Ionic 2 启动页轮播实战:Storage 持久化与 NavController 栈控制 启动页轮播(Intro Slider)是移动应用首次启动时的关键引导组件,其本质并非简单 UI 动画,而是基于用户状态驱动的流程控制器。它依赖可靠的本地持久化机制(如 SQLite/IndexedDB)记录‘是否已展示’状态,并需深度结合导航栈管理(如 setRoot/popToRoot)确保页面跳转原子性与历史清理彻底性。在 Ionic 2 中,@ionic/storage 提供跨平台存储抽象,规避 localStorage 在 iOS WKWebView 或 Android 定制 ROM 中的数据丢失风 阅读详情

相关推荐

使用SQLite实例深入理解PouchDB

PouchDB是一个开源的JavaScript数据库,它是专门为现代Web应用程序设计的,尤其是那些需要在离线时运行的应用程序。PouchDB在浏览器中运行,并且可以与远程服务器同步,这使得它非常适合移动应用。它的设计允许在设备上本地存储数据,并且能够在有互联网连接时将数据同步到远程数据库,如CouchDB。集成PouchDB到移动应用中,需要考虑的方面包括如何选择合适的插件、如何配置环境、以及如何优化性能以提供良好的用户体验。

weixin_33670640的博客 907

Web开发学习笔记:Ionic4与SQLite数据库交互

以下代码使用IDE:vscode; 语言模式:TypeScript 1.使用命令创建一个service ionic g serviceDBManager 创建成功后目录中会有两个文件 2.在app.module.ts中添加对DBManagerService类的引用同时在providers中添加DBManagerService类 3.在DBManagerService类中编...

JustWantToFly的博客 1132

ionic使用sqlite存储数据

ionic1使用sqlite存储数据,保存、删除、修改、查询等操作

ionic3 自定义cordova插件的开发和调用(包含jar包调用,文件结构详解)

ionic3 自定义插件的开发和调用(包含jar包调用,文件结构详解)

yang__Y的博客 920

Cadence17.2 > OrCAD Capture CIS > 设计规则检查(Design Rule Check)DRC学习记录详解

选中设计完成的DSN文件,选择Tool->Design Rule Check,弹出下面对话框,详解如下。 一、Design Rule Check对话框选项详解 Design Rules Options tab Set the scope, mode and type of design rule (electrical and / or physical) test options for the design rules check. 为

DL_62532的专栏 1万+

一文入门Qwen-Agent【附实战代码】

Qwen-Agent 是一个开源框架,用于开发基于 Qwen 模型的 AI 智能体应用,一文带你入门使用

m0_55303420的博客 1873

在ionic上使用sqlite

在看一篇文章,《Use SQLite Instead of Local Storage In Ionic Framework》,觉得挺好,因为之后开发可能需要用到,所以顺便翻译一下,记录下来以后使用。 首先创建我们的ionic项目: ionic start IonicProject blank cd IonicProject ionic platform add and

u012379815的博客 7375

Android 14.0 系统开机屏幕设置默认横屏显示

在14.0的系统ROM产品定制化开发中,对于产品需求来说,由于是宽屏设备所以产品需要开机默认横屏显示,开机横屏显示这就需要从 两部分来实现,一部分是系统开机动画横屏显示,另一部分是系统屏幕显示横屏显示,从这两方面就可以做到开机默认横屏显示了

安卓兼职framework和app工程师的博客 2150

ionic添加cordova插件-SQLite

gzgchzc博客最新更新地址:http://blog.gzvtc.cc/ SQLite 调用SQLite本地数据库储存接口 cordova plugin add https://github.com/litehelpers/Cordova-sqlite-storage.git Example module.controller('MyCtrl', function($scope,

gzgchzc的博客 2596

水文仿真软件:SWMM (Storm Water Management Model)_(6).地理信息系统(GIS)与SWMM数据交换

地理信息系统(GIS)与SWMM数据交换是水文仿真中的一个重要环节。通过合理的数据准备、导入、导出和校验,可以确保模型的准确性和实用性。本文介绍了使用SWMM GIS Add-on和Python脚本进行数据交换的方法,并提供了一些优化建议和常见问题的解决方案。希望这些内容能帮助读者更好地进行GIS与SWMM的数据交换,提高水文仿真的效率和质量。

kkchenjj的博客 576

链路状态路由协议 OSPF (一)

本章将会学习链路状态路由协议OSPF,理解OSPF的基本概念,工作原理,掌握OSPF配置基本命令。本章重点,OSPF的基本概念,OSPF配置。

yj11290301的博客 3473

在ionic 项目中 使用sqlite 代替local storage

首先新建个ionic项目ionic start IonicProject blank cd IonicProject ionic platform add android ionic platform add ios添加cordova 的sqlite插件cordova plugin add https://github.com/brodysoft/Cordova-SQLitePlugin.git这之

quguang65265的博客 908

SAP OData 开发从入门到提高教程的目录

笔者 18 年的 SAP 技术开发生涯,对 SAP OData 服务的开发,测试,发布,部署,测试,及基于各种不同 SAP 技术实现的 OData 服务的幕后技术实现细节和使用场合,均有着深入的研究。

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 7234

TanStack DB 在 Capacitor 与 Ionic 中的离线存储实战:以 RxDB SQLite 作为持久化后端

TanStack DB 为你的 [Capacitor](https://link.gitcode.com/i/e6cfbc756d4137f0df7f9ad445efb2c2) 或 [Ionic](https://link.gitcode.com/i/1a773b07800e92131a429404687a6cae) 混合应用提供实时查询(live queries)与乐观更新(optimistic

gitblog_00828的博客 473

嵌入式工程师成长之路(1)——元件基础(完整版)

为什么你的电路总是“玄学”故障?答案藏在这些元件里! 0欧电阻竟能引发信号反射?5V转3.3V电平匹配失败导致MCU烧毁?电容降压设计让电源“滋滋”响?——这些坑,本文全填平! 优快云硬件领域头部博主十年踩坑经验汇总,覆盖电阻、电容、电感核心难点+高频实战问题,让你从“调试地狱”直通“一次成功”!

云轩阁 2万+

面试问题总结——关于OpenCV(一)

整理了一下网上和我面试中遇到的关于OpenCV相关的问题。 其中因为我的简历中有个项目用到了特征点检测相关的知识,所以整理了SIFT/SURF和FLANN。 有些知识点也不深入,对于写的不对的地方,欢迎指正。 关于OpenCV的内容 1.OpenCV中cv::Mat的深拷贝和浅拷贝问题   深拷贝:分配新内存的同时拷贝数据,当被赋值的容器被修改时,原始容器数据不会改变。   浅拷贝:仅拷贝数据,当被赋值容器修改时,原始容器数据也会做同样改变。 OpenCV的Mat时,有几种赋值方式分别为:   深.

boss-dog 1万+

通达信数据读取指南:用 mootdx 把行情、历史 K 线、财报搬进 DataFrame

**核心关键词**:mootdx 通达信数据读取 **长尾关键词**:Python 读取通达信行情数据、通达信历史数据离线解析、通达信财务数据下载 --- 3000 多个 `.day` 文件,用 struct 手写解析脚本,我花了整整一晚;后来发现 mootdx 里 `Reader.daily()` 一行就干完同样的活。mootdx 是通达信数据读取的一个轻便封装,本地 `.day` 二进制文

gitblog_00060的博客 418

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

Ionic5+Angular9+Cordova混合开发

记录下自己的学习路线,仅供参考 环境搭建 有很多大佬介绍了如何安装环境,可以看这里 ionic5+angular8混合移动开发(一)——环境搭建 基于ionic4、cordova搭建android开发环境 ionic+angular+cordova 安卓环境搭建 理解 ionic 、 angular 和cordova之间的关系 理解Ionic、Angular、Cordova及插件之间的关系 Ang...

Downsiren的博客 1351

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

fairchem 机器学习势实战:算吸附能、找过渡态、跑分子动力学的完整流程

fairchem(仓库名 ocp)是 FAIR Chemistry 开源的机器学习势(MLIP)工具库。它用 UMA 这一套通用模型,为分子、无机材料、催化表面和 MOF 直接给出能量与力,让你用几行 Python 完成原本要排队等 DFT 的计算。本文按"装环境 → 出第一个结果 → 做三类真实任务"的顺序,讲清楚它怎么用、常用在哪里翻车。 [![UMA 通用原子模型连接分子、材料、催化五大领

gitblog_00539的博客 925

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

Web开发笔记:Ionic实现表格展示数据

1.accountgrid.page.html <ion-content style="overflow: scroll;" (ionScroll)="ionScroll()" scroll-events='true' id='Content'> <!-- 查询条件 --> <div id="CONTENT_TOP" style="width: 100%; border: tomato 1px solid;"> <form (

JustWantToFly的博客 1057

TanStack DB 在 React Native 与 Expo 中的离线存储:用 RxDB SQLite 实现持久化与同步

TanStack DB 是纯 JavaScript 实现的内存响应式客户端存储,因此天然可以在 React Native / Expo 中运行,但手机系统随时可能回收 App 进程,纯内存数据会在下次启动时全部丢失。本指南讲解如何在移动端为 TanStack DB 接入 `@tanstack/rxdb-db-collection`,以 RxDB 的 SQLite(或 Expo Filesystem

gitblog_00019的博客 474

Capacitor 数据库选型实战:从 Preferences 到 RxDB SQLite RxStorage 的完整指南

[Capacitor](https://capacitorjs.com/) 是 Ionic 团队开发的开源原生 JavaScript 运行时,用于构建基于 Web 技术的跨平台原生应用。本文聚焦于 Capacitor 应用中的持久化数据存储方案选型,系统对比 Preferences API、LocalStorage/IndexedDB/WebSQL、SQLite 与 RxDB 四种路线,并给出在

gitblog_00201的博客 267

Ionic Starter Template 项目推荐

Ionic Starter Template 项目推荐 1. 项目基础介绍和主要编程语言 Ionic Starter Template 是一个基于 Ionic Framework 的开源项目模板,主要用于快速构建混合移动应用。该项目使用 JavaScript 作为主要的编程语言,结合 HTML 和 CSS 进行前端开发。Ionic Framework 是一个流行的开源框架,允许开发者使用 Web ...

gitblog_00348的博客 723

使用 Ionic 8 + Capacitor 构建跨端 RxDB 本地优先应用:Heroes 示例全解析

本篇技术指南围绕仓库中的 [Ionic 示例应用](https://link.gitcode.com/i/4052919a8e8d37a264b7bd2ea7ef019c) 展开,完整讲解如何在一个同时运行于浏览器、Android 与 iOS 的 Ionic 应用中集成 RxDB:从环境搭建、数据库服务封装、类型化 Schema、响应式查询,到 Leader Election 多标签页协同与原生端

gitblog_00562的博客 168

React 应用中使用 IndexedDB:用 RxDB 实现响应式查询与离线优先

IndexedDB 是浏览器内置的结构化数据存储方案,但原生 API 的回调风格、低层级设计和薄弱查询能力让它难以直接在 React 应用中高效使用。本文以 RxDB 为核心,讲解如何在 React 项目中用一套统一 API 完成数据库创建、集合定义、CRUD、响应式查询与跨标签页同步,并结合仓库源码揭示 `useLiveRxQuery`、`RxDatabaseProvider`、Preact S

gitblog_00546的博客 657

Cordova SQLitePlugin 使用教程

Cordova SQLitePlugin 是一个用于 Cordova/PhoneGap 的开源插件,旨在为 Android、iOS 和 Windows 平台提供 SQLite 数据库的访问能力。该插件基于 HTML5/Web SQL API,允许开发者在这些平台上使用 SQLite 数据库进行数据存储和管理。 ### 主要特点: - **跨平台支持**:支持 Android、iOS 和 Wind...

gitblog_00569的博客 1263
上一篇: Angular开发学习笔记:字符串与时间类型的转换
下一篇: Web开发学习笔记:Ionic4与SQLite数据库交互
JustWantToFly
博客等级 码龄10年 42粉丝 81原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值