构建第一个ArkTS应用之@LocalStorage，页面级UI状态存储，构建首个ArkTS应用，利用@LocalStorage实现页面级UI状态存储

摘要：本文将构建第一个ArkTS应用，其中的关键组件是@LocalStorage，用于页面级UI状态的存储。通过使用@LocalStorage，我们可以轻松地将UI状态持久化保存在本地存储中，提高应用的性能和用户体验。本文将介绍如何使用@LocalStorage进行页面级UI状态存储，包括其安装、配置和使用方法。通过这种方式，开发者可以更方便地管理应用的UI状态，提高应用的响应速度和用户体验。

LocalStorage在ArkTS中是一个用于页面级UI状态存储的机制，它可以通过@Entry装饰器的参数在页面中共享同一个LocalStorage实例，LocalStorage也可以在UIAbility实例内跨页面共享状态。

概述

LocalStorage是ArkTS为构建页面级别状态变量提供的内存内“数据库”，应用程序可以创建多个LocalStorage实例，这些实例可以在页面内共享，也可以通过GetShared接口实现跨UIAbility实例共享。

使用场景

1、应用逻辑使用LocalStorage

通过创建LocalStorage实例并使用给定的对象进行初始化，可以存储状态变量，这些状态变量可以通过@LocalStorageProp和@LocalStorageLink装饰器在UI组件内部获取。

2、在UI内部使用LocalStorage

除了在应用逻辑中使用LocalStorage，还可以借助相关的装饰器在UI组件内部获取LocalStorage实例中存储的状态变量。

装饰器说明

1、@LocalStorageProp

@LocalStorageProp装饰的变量与LocalStorage中给定属性建立单向同步关系，本地的修改不会同步回LocalStorage中，但是LocalStorage中给定属性的改变会覆盖本地的修改。

2、@LocalStorageLink

@LocalStorageLink装饰的变量与LocalStorage中给定属性建立双向同步关系，本地的修改会同步回LocalStorage中，同时LocalStorage中的改动也会同步到所有绑定的变量上。

限制条件

1、LocalStorage创建后，命名属性的类型不可更改，后续调用Set时必须使用相同类型的值。

2、GetShared接口仅能在UIAbility实例之间获取共享的LocalStorage实例，否则将返回undefined，示例展示了如何将LocalStorage实例从UIAbility共享到一个或多个视图。

使用规则说明

1、初始化规则：在使用@LocalStorageProp和@LocalStorageLink装饰器时，必须指定key作为常量字符串（带有引号），类型必须被指定，且必须和LocalStorage中对应属性相同，不支持any类型和undefined、null。

2、同步类型：@LocalStorageProp建立单向同步，@LocalStorageLink建立双向同步，本地修改在双向同步时会同步回LocalStorage，而单向同步时则不会。

兄弟节点之间同步状态变量

通过@LocalStorageLink建立的双向同步可以在兄弟节点之间同步状态变量，当LocalStorage中的属性发生变化时，所有绑定的组件都会同步更新，示例展示了如何在Parent自定义组件和Child自定义组件之间同步playCount状态变量。

七、将LocalStorage实例从UIAbility共享到一个或多个视图

为了在多个视图中共享LocalStorage实例，可以在UIAbility中创建实例并通过windowStage.loadContent进行共享，在UI页面可以通过GetShared接口获取共享的LocalStorage实例，示例展示了如何在Index页面和Page页面之间共享并修改propA的值，开发者更建议使用这种方式来构建LocalStorage的实例，并在创建时写入默认值作为备份或用于单元测试。