HarmonyOS 鸿蒙Next中如何在应用中实现数据缓存和离线功能？

关键字：数据缓存、离线功能、缓存策略、数据同步、本地存储

回答

原理解析

数据缓存可以提升应用性能和用户体验，支持离线访问和快速加载。

核心概念：

1. 缓存策略：内存缓存、磁盘缓存
2. 缓存更新：过期时间、版本控制
3. 离线检测：网络状态检测
4. 数据同步：在线时同步数据

详细解决步骤

步骤1：创建缓存服务

class CacheService {

  private cache: Map<string, { data: any, timestamp: number }> = new Map()

  private ttl: number = 60000 // 1分钟


  set(key: string, data: any): void {
    this.cache.set(key, {
      data,
      timestamp: Date.now()
    })
  }


  get(key: string): any | null {
    const item = this.cache.get(key)
    if (!item) return null
    
    if (Date.now() - item.timestamp > this.ttl) {
      this.cache.delete(key)
      return null
    }
    
    return item.data
  }
}

步骤2：离线检测

import { connection } from '@kit.NetworkKit'


async checkNetwork(): Promise<boolean> {
  const netHandle = connection.getDefaultNet()
  return netHandle.hasDefaultNet()
}

示例代码

完整示例：缓存和离线功能

// 缓存服务
class CacheService {
  private static instance: CacheService | null = null
  private cache: Map<string, { data: any, timestamp: number, ttl: number }> = new Map()


  static getInstance(): CacheService {
    if (!CacheService.instance) {
      CacheService.instance = new CacheService()
    }
    return CacheService.instance
  }


  set(key: string, data: any, ttl: number = 60000): void {
    this.cache.set(key, {
      data,
      timestamp: Date.now(),
      ttl
    })
  }


  get(key: string): any | null {
    const item = this.cache.get(key)
    if (!item) return null
    
    if (Date.now() - item.timestamp > item.ttl) {
      this.cache.delete(key)
      return null
    }
    
    return item.data
  }


  clear(): void {
    this.cache.clear()
  }
}


@Entry
@Component
struct CacheDemo {
  @State data: any[] = []
  @State isOnline: boolean = true
  @State isLoading: boolean = false
  private cacheService = CacheService.getInstance()


  aboutToAppear() {
    this.checkNetwork()
    this.loadData()
  }


  build() {
    Column({ space: 20 }) {
      Text('缓存和离线功能示例')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .padding(20)


      // 网络状态
      Row() {
        Text('网络状态:')
        Text(this.isOnline ? '✅ 在线' : '❌ 离线')
          .fontColor(this.isOnline ? '4CAF50' : 'F44336')
      }


      // 数据列表
      if (this.isLoading) {
        LoadingProgress()
      } else {
        List() {
          ForEach(this.data, (item: any) => {
            ListItem() {
              Text(item.title || item.name)
                .width('100%')
                .padding(15)
            }
          })
        }
        .layoutWeight(1)
      }


      // 操作按钮
      Row({ space: 15 }) {
        Button('刷新数据')
          .onClick(() => {
            this.loadData()
          })
        
        Button('清空缓存')
          .onClick(() => {
            this.cacheService.clear()
            this.data = []
          })
      }
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('F1F3F5')
  }


  async checkNetwork() {
    try {
      const connection = await import('@kit.NetworkKit')
      const netHandle = connection.connection.getDefaultNet()
      this.isOnline = netHandle.hasDefaultNet()
    } catch {
      this.isOnline = true // 默认在线
    }
  }


  async loadData() {
    this.isLoading = true
    
    // 先尝试从缓存加载
    const cachedData = this.cacheService.get('data')
    if (cachedData) {
      this.data = cachedData
      this.isLoading = false
    }
    
    // 如果在线，尝试从网络加载
    if (this.isOnline) {
      try {
        // 模拟网络请求
        await new Promise(resolve => setTimeout(resolve, 1000))
        const newData = [
          { id: '1', title: '数据1' },
          { id: '2', title: '数据2' }
        ]
        
        // 更新缓存
        this.cacheService.set('data', newData, 300000) // 5分钟
        this.data = newData
      } catch (error) {
        console.error('加载失败:', error)
        // 如果网络失败，使用缓存数据
        if (!cachedData) {
          this.data = []
        }
      }
    }
    
    this.isLoading = false
  }
}

高级用法

1. 持久化缓存

// 结合Preferences实现持久化
async saveToCache(key: string, data: any) {
  this.cacheService.set(key, data)
  await preferences.put(key, JSON.stringify(data))
}

1. 增量更新

async syncData() {
  const localData = this.cacheService.get('data')
  const serverData = await this.fetchData()
  
  // 合并数据
  const merged = this.mergeData(localData, serverData)
  this.cacheService.set('data', merged)
}

常见问题

Q: 缓存何时更新？ A: 根据业务需求，可以在数据变化时、定时或用户触发时更新。

Q: 如何处理缓存冲突？ A: 使用版本号或时间戳判断数据新旧，优先使用最新数据。

Q: 离线功能如何实现？ A: 检测网络状态，离线时使用缓存数据，在线时同步更新。

总结：数据缓存和离线功能可以大幅提升用户体验，合理实现可以让应用更可靠。