文章目录
开发中使用------鸿蒙本地存储之收藏功能
一、背景
一个本地应用,做一个收藏功能,要求收藏的内容,下次打开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.展示效果

