Ionic 4中离线数据本地存储及联网后同步至数据库实现咨询

作为常年泡在Ionic社区的开发者，我来给你梳理下这两个需求的落地方案，都是项目里验证过的靠谱做法：

1. 离线状态下的本地数据存储 #

根据数据复杂度，推荐两种主流方案，按需选择就行：

方案一：Ionic Storage（轻量键值对存储） #

这是官方主推的轻量存储方案，底层会自动适配平台——浏览器用localStorage，移动端默认用SQLite，适合存储简单的JSON数据（比如表单草稿、用户偏好这类）。

实现步骤：

• 先装依赖：

npm install @ionic/storage
# 移动端建议装上SQLite依赖，性能更稳
ionic cordova plugin add cordova-sqlite-storage
npm install @ionic-native/sqlite

• 在app.module.ts里配置存储模块：

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  imports: [
    // ...其他模块导入
    IonicStorageModule.forRoot({
      name: '__myOfflineDB',
      driverOrder: ['sqlite', 'indexeddb', 'websql'] // 优先用SQLite
    })
  ]
})
export class AppModule {}

• 结合网络状态判断，封装存储逻辑：
  先装网络检测插件，用来识别离线状态：

ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

然后在专属服务里写存储方法：

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { Network } from '@ionic-native/network/ngx';

@Injectable({ providedIn: 'root' })
export class OfflineStorageService {
  constructor(private storage: Storage, private network: Network) {}

  // 保存离线数据，自动标记未同步状态
  async saveOfflineData(data: any) {
    const offlineRecord = {
      ...data,
      isSynced: false,
      syncTimestamp: new Date().getTime(),
      retryCount: 0 // 用于后续重试逻辑
    };
    // 把所有未同步数据存在一个数组里，方便后续批量处理
    const unsyncedList = await this.storage.get('unsynced_records') || [];
    unsyncedList.push(offlineRecord);
    await this.storage.set('unsynced_records', unsyncedList);
  }
}

方案二：SQLite（复杂结构化数据） #

如果你的数据是关系型结构（比如订单、明细这类关联数据），用SQLite更合适，性能和扩展性都更好。

实现步骤：

• 装依赖：

ionic cordova plugin add cordova-sqlite-storage
npm install @ionic-native/sqlite

• 创建数据库服务，初始化表结构：

import { Injectable } from '@angular/core';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite/ngx';
import { Network } from '@ionic-native/network/ngx';

@Injectable({ providedIn: 'root' })
export class SqliteOfflineService {
  private dbInstance: SQLiteObject;

  constructor(private sqlite: SQLite, private network: Network) {
    this.initDatabase();
  }

  async initDatabase() {
    this.dbInstance = await this.sqlite.create({
      name: 'myBusinessDB.db',
      location: 'default'
    });
    // 创建带同步标记的表
    await this.dbInstance.executeSql(`CREATE TABLE IF NOT EXISTS orders (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      order_data TEXT,
      is_synced INTEGER DEFAULT 0,
      create_time INTEGER
    )`, []);
  }

  // 插入离线订单数据
  async insertOfflineOrder(order: any) {
    await this.dbInstance.executeSql(`INSERT INTO orders (order_data, is_synced, create_time) VALUES (?, ?, ?)`, [
      JSON.stringify(order),
      0, // 0代表未同步
      new Date().getTime()
    ]);
  }
}

2. 联网后的数据同步逻辑 #

核心思路很简单：离线存数据时标记「未同步」，网络恢复后自动把这些数据上传到服务器，成功后更新本地标记。

实现步骤： #

1. 监听网络连接恢复事件
   在根组件或同步服务里监听网络状态，一旦联网就触发同步：

import { Network } from '@ionic-native/network/ngx';
import { Subscription } from 'rxjs';
import { Storage } from '@ionic/storage';
import { ApiService } from './api.service'; // 你的后端API服务

@Injectable({ providedIn: 'root' })
export class SyncService {
  private networkSub: Subscription;

  constructor(
    private network: Network,
    private storage: Storage,
    private apiService: ApiService
  ) {
    this.watchNetworkChange();
  }

  watchNetworkChange() {
    this.networkSub = this.network.onConnect().subscribe(() => {
      // 延迟3秒再同步，避免刚联网时网络不稳定
      setTimeout(() => {
        if (this.network.type !== 'none') {
          this.syncUnsyncedData();
        }
      }, 3000);
    });
  }
}

2. 执行同步逻辑（以Ionic Storage为例）

async syncUnsyncedData() {
  const unsyncedRecords = await this.storage.get('unsynced_records') || [];
  if (unsyncedRecords.length === 0) return;

  // 按时间排序，先同步旧数据
  const sortedRecords = unsyncedRecords.sort((a, b) => a.syncTimestamp - b.syncTimestamp);

  for (const record of sortedRecords) {
    try {
      // 调用后端API上传数据
      await this.apiService.uploadRecord(record);
      // 上传成功，从列表中移除该记录
      const index = unsyncedRecords.indexOf(record);
      if (index > -1) unsyncedRecords.splice(index, 1);
    } catch (error) {
      console.error(`同步失败，记录ID: ${record.id}`, error);
      // 重试次数+1，超过3次就标记为同步失败
      record.retryCount += 1;
      if (record.retryCount >= 3) {
        record.syncFailed = true;
      }
    }
  }

  // 更新本地存储的未同步列表
  await this.storage.set('unsynced_records', unsyncedRecords);
}

如果用SQLite，同步逻辑类似：先查询is_synced = 0的记录，上传成功后执行UPDATE orders SET is_synced = 1 WHERE id = ?即可。

额外提醒： #

• 冲突处理：如果服务器已有同ID数据，要提前定义策略——比如本地覆盖服务器、服务器覆盖本地，或者弹窗让用户选择。
• 后台同步：如果需要应用在后台也能同步，可以结合Ionic Background Task插件，但注意不同平台有后台运行限制。
• 进度反馈：同步时可以给用户显示进度条或提示，提升体验。

内容的提问来源于stack exchange，提问作者shivaraj acharya