Obtaining the Recently Accessed List
To quickly access the recently used Sendable objects, ArkTS introduces SendableLruCache since API version 18. With this class, you can add, delete, and obtain Sendable objects from a SendableLruCache instance to quickly access the recently used Sendable objects. This topic describes how to use SendableLruCache to obtain the recently accessed list. It uses a bookshelf as an example. Every time a user opens a book, the book information is updated to the recently accessed list. When the user accesses the bookshelf next time, the list of books that the user has looked at is displayed.
NOTE
SendableLruCache instances must be locked to prevent data inconsistency caused by concurrent operations from multiple threads. Only Sendable objects can be put into a SendableLruCache instance.
-
Create a SendableLruCache instance and set its maximum capacity based on service requirements.
In this example, the maximum capacity of the SendableLruCache instance is set to 4, the Sendable class is used for management, and the Sendable class instance is exported.// LruCache.ets import { ArkTSUtils } from '@kit.ArkTS'; // Use the 'use shared' marker to mark a module shareable. 'use shared' // The SendableClass instance can be shared across different threads. @Sendable class SendableClass { // Lock the SendableLruCache instances to prevent data inconsistency caused by concurrent operations from multiple threads. private lock_: ArkTSUtils.locks.AsyncLock = new ArkTSUtils.locks.AsyncLock(); private books_: ArkTSUtils.SendableLruCache<string, string> = new ArkTSUtils.SendableLruCache<string, string>(4); constructor() { this.books_.put('fourth', 'Book4'); this.books_.put('third', 'Book3'); this.books_.put('second', 'Book2'); this.books_.put('first', 'Book1'); } // Wrap the put, get, and keys methods and perform the lock operation. public async put(key: string, value: string) { await this.lock_.lockAsync(() => { this.books_.put(key, value); }) } public async get(key: string): Promise<string | undefined> { return this.lock_.lockAsync(() => { return this.books_.get(key); }); } public async keys(): Promise<string[]> { return this.lock_.lockAsync(() => { return this.books_.keys(); }); } } export let lruCache = new SendableClass(); -
In the same directory as the Index.ets page, create four book pages. Each page shows its own book information. Register the path of each page in the main_pages.json file under src/main/resources/base/profile/.
// Book1.ets @Entry @Component struct Index1 { @State message: string = 'Hello World!'; build() { RelativeContainer() { Text('Content of book 1') .id('first book') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: 'container', align: VerticalAlign.Center }, middle: { anchor: 'container', align: HorizontalAlign.Center } }) Button('Back') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .position({ x: '50%' }) .onClick(() => { this.getUIContext().getRouter().pushUrl({ url: 'pages/GetRecentList' }); }) } .height('100%') .width('100%') } }// Book2.ets @Entry @Component struct Index2 { @State message: string = 'Hello World!'; build() { RelativeContainer() { Text('Content of book 2') .id('second book') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: 'container', align: VerticalAlign.Center }, middle: { anchor: 'container', align: HorizontalAlign.Center } }) Button('Back') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .position({ x: '50%' }) .onClick(() => { this.getUIContext().getRouter().pushUrl({ url: 'pages/GetRecentList' }); }) } .height('100%') .width('100%') } }// Book3.ets @Entry @Component struct Index3 { @State message: string = 'Hello World!'; build() { RelativeContainer() { Text('Content of book 3') .id('third book') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: 'container', align: VerticalAlign.Center }, middle: { anchor: 'container', align: HorizontalAlign.Center } }) Button('Back') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .position({ x: '50%' }) .onClick(() => { this.getUIContext().getRouter().pushUrl({ url: 'pages/GetRecentList' }); }) } .height('100%') .width('100%') } }// Book4.ets @Entry @Component struct Index4 { @State message: string = 'Hello World!'; build() { RelativeContainer() { Text('Content of book 4') .id('fourth book') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: 'container', align: VerticalAlign.Center }, middle: { anchor: 'container', align: HorizontalAlign.Center } }) Button('Back') .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .position({ x: '50%' }) .onClick(() => { this.getUIContext().getRouter().pushUrl({ url: 'pages/GetRecentList' }); }) } .height('100%') .width('100%') } }// main_pages.json { "src": [ "pages/Index", "pages/Book1", "pages/Book2", "pages/Book3", "pages/Book4" ] } -
Each time a user accesses the bookshelf page, the application displays the list of recently accessed books.
// GetRecentList.ets import { taskpool } from '@kit.ArkTS'; import { lruCache } from '../utils/LruCache' // ... @Concurrent async function updateBooks(key: string, value: string) { // Update the latest access list in the child thread. await lruCache.put(key, value); } @Entry @Component struct GetRecentList { @State message: string = 'Bookshelf' @State books: string[] = []; async aboutToAppear () { // The application automatically obtains the list of recently accessed books. this.books = await lruCache.keys(); } build() { Column({ space: 1 }) { Text(this.message) .id('HelloWorld') .fontSize(50) .fontWeight(FontWeight.Bold) .alignRules({ center: { anchor: 'container', align: VerticalAlign.Center }, middle: { anchor: 'container', align: HorizontalAlign.Center } }) Button(this.books[3]) .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .onClick(async () => { // Obtain the bound book information. let value = await lruCache.get(this.books[3]); // Update the recently accessed list. taskpool.execute(updateBooks, this.books[3], value); this.getUIContext().getRouter().pushUrl({ url: 'pages/' + value }); }) Button(this.books[2]) .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .onClick(async () => { // Obtain the bound book information. let value = await lruCache.get(this.books[2]); // Update the recently accessed list. taskpool.execute(updateBooks, this.books[2], value); this.getUIContext().getRouter().pushUrl({ url: 'pages/' + value }); }) Button(this.books[1]) .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .onClick(async () => { // Obtain the bound book information. let value = await lruCache.get(this.books[1]); // Update the recently accessed list. taskpool.execute(updateBooks, this.books[1], value); this.getUIContext().getRouter().pushUrl({ url: 'pages/' + value }); }) Button(this.books[0]) .fontSize(20) .padding(10) .fontWeight(FontWeight.Bold) .onClick(async () => { // Obtain the bound book information. let value = await lruCache.get(this.books[0]); // Update the recently accessed list. taskpool.execute(updateBooks, this.books[0], value); this.getUIContext().getRouter().pushUrl({ url: 'pages/' + value }); }) // ... } .height('100%') .width('100%') } }