开发中使用——鸿蒙本地存储之收藏功能

文章目录


开发中使用------鸿蒙本地存储之收藏功能

一、背景

一个本地应用,做一个收藏功能,要求收藏的内容,下次打开App的时候,还可以看到。

二、思路

本地缓存

  • 文件缓存:使用轻量级缓存SharedPreferences
  • 数据库缓存:sqlLite(后续会进行展开介绍)

三、方案一

轻量级缓存SharedPreferences的实现

首先要解决下面这几个问题,什么时候存、什么时候取,如何存,以及应用内数据如何同步的问题。

1.准备工作

我们需要有一个管理缓存的单例类,处理存、取、添加、修改、删除等操作。所以大概情况下,我们要先有下面这样一个结构的类,用来管理这一堆事情。

复制代码
import { common } from '@kit.AbilityKit'
import { preferences } from '@kit.ArkData'
import { Country } from './DataModel'

/**
 * 收藏数据管理
 */
export class CollectDataManager {
  private static instance: CollectDataManager;
  public  collectItems: Array<Country> = []
  private  myStore:string = 'com.silence.flagCard';
  private itemsKey: string = 'flagCard'
  private static context: common.UIAbilityContext; // 应用上下文

  // 私有构造函数
  private constructor() {}

  // 初始化上下文(需在应用启动时调用)
  public static init(context: common.UIAbilityContext): void {
    CollectDataManager.context = context;
  }

  // 获取单例实例
  public static getInstance(): CollectDataManager {
    if (!CollectDataManager.instance) {
      if (!CollectDataManager.context) {
        throw new Error('Context not initialized! Call PreferencesUtil.init() first.');
      }
      CollectDataManager.instance = new CollectDataManager();
    }
    return CollectDataManager.instance;
  }
  
  /**
   * 加载缓存数据
   */
  public async loadData() {}

  /**
   * 加载缓存数据
   */
  public async loadData() {
    try {
      let pref = await preferences.getPreferences(CollectDataManager.context, this.myStore);
      let itemsJson = await pref.get(this.itemsKey, '');
      let itemsData = JSON.parse(itemsJson.toString()) as Array<Country>
      this.collectItems = itemsData;

    } catch (error) {
      console.error('加载数据失败:', error)
      this.collectItems = []
    }
  }

  /**
   * 保存缓存数据
   */
  async saveData() {
    try {
      let itemsJson = JSON.stringify(this.collectItems)
      let pref = await preferences.getPreferences(CollectDataManager.context, this.myStore);
      await pref.put(this.itemsKey, itemsJson)
      await pref.flush()

    } catch (error) {
      console.error('保存数据失败:', error)
    }
  }

  /**
   * 更新数据
   * @param item
   */
  updateItem(item: Country) {}

  /**
   * 删除数据
   * @param id
   */
  deleteItem(id: number) {}

  /**
   * 获取所有收藏数据
   * @returns
   */
  getAllItems(): Array<Country> {
    return this.collectItems
  }

  /**
   * 通过id获取收藏数据item
   * @returns
   */
  getItemById(id: number): Country | undefined{
    return this.collectItems.find(item => item.id == id)
  }
}

2.解决什么时候存

应用销毁之前,要将收藏的数据存到缓存文件中。我是建议在入口EntryAbility中onDestroy()方法中存储数据。

复制代码
  onDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');

    /// 保存数据
    CollectDataManager.getInstance().saveData();
  }

3.解决什么时候取

应用打开的时候,要将缓存的数据取出来。在收藏页面展示出来。我是建议在入口EntryAbility中onCreate()中初始化数据管理的单例类和获取数据。

复制代码
 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');

    /// 初始化轻量级缓存
    CollectDataManager.init(this.context);
    CollectDataManager.getInstance().loadData();
  }

4.如何存

这里其实设计三个问题,添加数据、修改数据、删除数据。

  • 添加数据

    复制代码
    /**
     * 添加数据
     * @param item
     */
    addItem(item: Country) {
      /// 需要去重处理
      if(this.getItemById(item.id)){
        return;
      }
    
      this.collectItems.push(item)
      this.saveData()
    }
  • 修改数据

    复制代码
    /**
     * 更新数据
     * @param item
     */
    updateItem(item: Country) {
      // 判断是否存在
      const index = this.collectItems.findIndex(i => i.id === item.id)
      if (index !== -1) {
        this.collectItems[index] = item
        this.saveData()
      }
    }
  • 删除数据

    复制代码
    /**
     * 删除数据
     * @param id
     */
    deleteItem(id: number) {
      // 判断是否存在
      const index = this.collectItems.findIndex(i => i.id === id)
      if (index !== -1) {
        this.collectItems.splice(index, 1)
        this.saveData()
      }
    }

5.数据如何同步

需要借助修饰词 @ObservedV2 对类进行装饰,对需要数据变化,全局UI变化的collectItems使用@Trace进行装饰。修改如下。

复制代码
/**
 * 收藏数据管理
 */
@ObservedV2
export class CollectDataManager {
  private static instance: CollectDataManager;

  @Trace
  public  collectItems: Array<Country> = []

......

6.如何使用

  • 获取这个收藏列表

    /**

    • 我的收藏页面
      */
      @Component
      export struct CollectPage {
      // 获取收藏列表
      @State myCollectItems:Country[] = CollectDataManager.getInstance().collectItems;

    ......

  • 添加/删除收藏列表的某一项数据
    先验证是否已经收藏,这个也是显示收藏按钮状态的一个状态变量。然后在用户点击收藏按钮时候,判断是否进行收藏或者取消收藏。

    复制代码
       /// 验证是已经收藏
        this.isFavorite = CollectDataManager.getInstance().getItemById(this.country.id) != undefined;
    
        if(this.isFavorite){
          CollectDataManager.getInstance().deleteItem(this.country.id);
        }else{
          CollectDataManager.getInstance().addItem(this.country);
        }

7.展示效果

相关推荐
麦兜*6 小时前
MongoDB 事务管理:多文档操作如何保证 ACID?
java·数据库·后端·mongodb·spring cloud·springboot
明月与玄武6 小时前
动态配置最佳实践:Spring Boot 十种落地方式与回滚审计指南(含实操与避坑)
java·springboot动态配置·10种方法与实践
AAA修煤气灶刘哥7 小时前
微服务网关:别再让接口 “各自为战”!Gateway 实战 + 鉴权全攻略
java·后端·spring cloud
叫我阿柒啊7 小时前
从Java全栈到前端框架:一场真实的技术面试实录
java·spring boot·redis·typescript·vue3·jwt·前后端分离
武子康7 小时前
Java-114 深入浅出 MySQL 开源分布式中间件 ShardingSphere 深度解读
java·数据库·分布式·mysql·中间件·性能优化·开源
Li_yizYa7 小时前
JVM:内存区域划分、类加载的过程、垃圾回收机制
java·jvm
失散137 小时前
并发编程——06 JUC并发同步工具类的应用实战
java·架构·并发编程
2301_781392527 小时前
从spring MVC角度理解HTTP协议及Request-Response模式
java·spring·mvc
程序员江鸟7 小时前
Java面试实战系列【JVM篇】- JVM内存结构与运行时数据区详解(共享区域)
java·jvm·面试