HarmonyOS 鸿蒙Next如何持久化存储用户输入的文字列表

发布于 1周前 作者 vueper 来自 鸿蒙OS

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中,持久化存储用户输入的文字列表可以通过多种方式实现,以下是几种常见的方法:

  1. 用户首选项(Preferences)

    • 提供Key-Value键值型的数据处理能力,支持应用持久化轻量级数据。
    • 可以将用户输入的文字列表转换为字符串后存储,读取时再转换回数组。
    • 适用于存储用户的个性化设置等轻量级数据。
  2. 文件存储

    • 可以将数据以文件的形式保存在设备的存储空间中。
    • 使用FileOutputStream和FileInputStream类进行文件的写入和读取。
    • 适用于数据量较大的情况,但需要注意文件管理的复杂性和安全性。
  3. 数据库存储

    • 使用LitePal等第三方库进行数据库操作。
    • 通过创建数据库、表和实体类,使用SQL语句对数据进行插入、查询、更新和删除等操作。
    • 适用于需要复杂查询和管理的数据场景。

在选择存储方式时,需要根据应用的具体需求和场景来决定。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部