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

---

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

一、背景

一个本地应用，做一个收藏功能，要求收藏的内容，下次打开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] = itemthis.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;@Tracepublic  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.展示效果