HarmonyOS 鸿蒙Next如何持久化存储用户输入的文字列表
HarmonyOS 鸿蒙Next如何持久化存储用户输入的文字列表
现在需要做一个列表,用户在输入框中输入文字,点击按钮将文字保存,用户可以多次输入,以列表的形式列出用户输入的内容,如何把列表内容保存到手机上,下次打开读取进行展示?
3 回复
您好,您描述的场景有点像 搜索框历史记录的保存;
请您参考一下demo,看能否实现您想要的效果;
// SearchBox.ets
import { promptAction, ShowDialogSuccessResponse } from '[@kit](/user/kit).ArkUI';
import dataPreferences from '[@ohos](/user/ohos).data.preferences';
import preferences from '[@ohos](/user/ohos).data.preferences';
import { BusinessError } from '[@kit](/user/kit).BasicServicesKit';
// import { console } from '[@ohos](/user/ohos)/base';
let preferencesData: dataPreferences.Preferences | null = null;
let TAG = 'SearchKeyPage';
let context = getContext() // 获取context
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index15 {
controller: SearchController = new SearchController();
[@State](/user/State) searchHistoryArray: string[] = [];
[@State](/user/State) inputValue: string = "";
[@State](/user/State) placeholderText: string = "最新科技来袭";
private arrMax: number = 10;
aboutToAppear(): void {
console.info(TAG, `abouttoAppear enter`);
this.initPreferencesData();
this.getPreferencesData();
}
aboutToDisappear(): void {
if (context != null) {
console.info(TAG, "context preferencesDir: " + context.preferencesDir);
}
this.flushPreferencesData();
}
build() {
NavDestination() {
Column({ space: 10 }) {
Row() {
Search({ value: this.inputValue, placeholder: this.placeholderText, controller: this.controller })
.searchButton('搜索')
.width('85%')
.height(40)
.backgroundColor('#F5F5F5')
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.textFont({ size: 14, weight: 400 })
.onSubmit((value: string) => {
this.insertOrUpdateItem(value === "" ? this.placeholderText : value)
})
.margin({ top: 10, bottom: 10 })
}
.width('100%')
Column() {
Row() {
Text('历史搜索').fontSize(18)
Blank()
Image($r('app.media.trash'))
.width($r('app.string.search_component_search_history_delete_size'))
.onClick(() => {
// 清空历史记录-确认弹框
promptAction.showDialog({
message: $r('app.string.search_component_search_delete_title'),
alignment: DialogAlignment.Center,
buttons: [
{
text: $r('app.string.search_component_delete_back'),
color: $r('app.string.search_component_button_text_color')
},
{
text: $r('app.string.search_component_delete_ok'),
color: $r('app.string.search_component_button_text_color')
}
]
}).then((data: ShowDialogSuccessResponse) => {
// 点击删除
if (data.index === 1) {
this.searchHistoryArray = [];
}
// 删除首选项
this.putPreferencesData(this.searchHistoryArray);
})
})
}
.visibility(this.searchHistoryArray.length === 0 ? Visibility.None : Visibility.Visible) // 没有搜索历史时隐藏
.height($r('app.string.search_component_search_history_delete_size'))
.width('100%')
.margin({ top: $r('app.string.search_component_search_history_text_padding_margin1') })
Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
ForEach(this.searchHistoryArray?.slice().reverse(), (item: string) => {
Row() {
Text(item + ' ').margin({ top: 10, bottom: 10 })
Text('×').fontColor('#D8D6DE').margin({ top: 10, bottom: 10, right: 5 }).fontSize(25).onClick(() => {
this.removeItem(item)
})
}.backgroundColor('#FAFAFC').margin(5)
})
}
}.width('100%').alignItems(HorizontalAlign.Start)
}.width('100%').margin({ top: 60, left: 10, right: 10 }).constraintSize(
{ maxWidth: '100%' })
}
}
insertOrUpdateItem(item: string) {
const index = this.searchHistoryArray.indexOf(item)
if (index !== -1) {
this.searchHistoryArray.splice(index, 1)
this.searchHistoryArray.push(item)
return
}
if (this.searchHistoryArray.length < this.arrMax) {
this.searchHistoryArray.push(item)
} else {
this.searchHistoryArray.shift()
this.searchHistoryArray.push(item)
}
// 数据同步到首选项中
this.putPreferencesData(this.searchHistoryArray);
}
putPreferencesData(searchHistoryArray: string[]) {
try {
console.info(TAG, "The key 'searchHistory' does not contain.");
if (preferencesData != null) {
preferencesData.putSync('searchHistory', searchHistoryArray);
}
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(TAG, `Failed to check the key 'searchHistory'. Code:${code}, message:${message}`);
}
}
removeItem(item: string) {
const index = this.searchHistoryArray.indexOf(item);
if (index !== -1) {
this.searchHistoryArray.splice(index, 1);
}
// 这里也可以添加将更新后的本地历史搜索数据写回数据库的逻辑(如果数据库操作已经实现)
this.putPreferencesData(this.searchHistoryArray);
}
initPreferencesData() {
try {
let options: dataPreferences.Options = { name: 'myStoreTest' };
preferencesData = dataPreferences.getPreferencesSync(context, options);
console.info(TAG + "success to get preferences");
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(TAG, `Failed to get preferences. Code:${code},message:${message}`);
}
}
getPreferencesData() {
if (preferencesData != null) {
try {
let val: preferences.ValueType = preferencesData.getSync('searchHistory', '') as string[];
if (val) {
this.searchHistoryArray = val as string[];
}
console.info(TAG, `Succeeded in getting value of 'searchHistory'. val: ${val}.`);
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(TAG, `Failed to get value of 'searchHistory'. Code:${code}, message:${message}`);
}
}
}
flushPreferencesData() {
if (preferencesData != null) {
try {
preferencesData.flush((err: BusinessError) => {
if (err) {
console.error(TAG, `Failed to flush. Code:${err.code}, message:${err.message}`);
return;
}
console.info(TAG, 'Succeeded in flushing.');
})
} catch (err) {
let code = (err as BusinessError).code;
let message = (err as BusinessError).message;
console.error(TAG, `Failed to flush. Code:${code}, message:${message}`);
}
}
}
}
非常感谢,您给的例子很有帮助!
在HarmonyOS鸿蒙Next中,持久化存储用户输入的文字列表可以通过多种方式实现,以下是几种常见的方法:
-
用户首选项(Preferences):
- 提供Key-Value键值型的数据处理能力,支持应用持久化轻量级数据。
- 可以将用户输入的文字列表转换为字符串后存储,读取时再转换回数组。
- 适用于存储用户的个性化设置等轻量级数据。
-
文件存储:
- 可以将数据以文件的形式保存在设备的存储空间中。
- 使用FileOutputStream和FileInputStream类进行文件的写入和读取。
- 适用于数据量较大的情况,但需要注意文件管理的复杂性和安全性。
-
数据库存储:
- 使用LitePal等第三方库进行数据库操作。
- 通过创建数据库、表和实体类,使用SQL语句对数据进行插入、查询、更新和删除等操作。
- 适用于需要复杂查询和管理的数据场景。
在选择存储方式时,需要根据应用的具体需求和场景来决定。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。