HarmonyOS ArkTS学习-状态管理-LocalStorage

参考文献

官方文档

使用场景

LocalStorage-页面级UI状态存储。在某个页面中共享变量。可以理解为LocalStorage是某个页面对的‘数据库’。可通过key-value的形式访问LocalStorage中的变量。

相关装饰器

@LocalStorageProp：UI中变量和LocalStorage单向同步。被@LocalStorageProp装饰的变量发生改变，不会影响LocalStorage中变量的值。但是LocalStorage中变量的值发生变化会同步被@LocalStorageProp装饰的变量。
@LocalStorageLink：UI中变量和LocalStorage双向同步。

使用LocalStorage

在使用LocalStorage时，需要将其绑定到对应页面的顶层组件，即将LocalStorage变量作为@Entry装饰器的参数。

代码示例

//相关装饰器：@LocalStorageProp和@LocalStorageLink
//LocalStorage为页面级状态变量提供存储的内存内数据库
//从UI内部使用LocalStorage

let storage = new LocalStorage({'num':1,'str':'hello'})


@Component
struct Child{

  build(){
    Row(){
      Column(){
        Button('set num')
          .fontSize(30)
          .onClick(() => {
            //prop 不会同步内存中的num
            let n = storage.prop('num')
            console.log(`num: ${n.get()}`)
            n.set(100)
          })

        Button('set num 100')
          .fontSize(30)
          .onClick(() => {
            //prop 不会同步内存中的num
            let n = storage.link('num')
            console.log(`num: ${n.get()}`)
            n.set(100)
          })

        Button('set str bye')
          .fontSize(30)
          .onClick(() => {
            //link 会同步内存中的str
            let n = storage.link('str')
            console.log(`str: ${n.get()}`)
            n.set('bye')
          })
      }
    }
  }
}

@Entry(storage)
@Component
struct Main{
  @LocalStorageProp('num') num:number = 1;

  @LocalStorageLink('str') str:string = 'hello';

  build(){
    Row(){
      Column(){
        Text(`num: ${this.num}`)
          .fontSize(30)
        Text(`str: ${this.str}`)
          .fontSize(30)
        Button('add num')
          .fontSize(30)
          .onClick(() => {
           this.num += 1
          })

        Button('set str hello')
          .fontSize(30)
          .onClick(() => {
            this.str = 'hello'
          })

        Child()
      }
    }
  }
}

上述代码中num被@LocalStorageProp装饰，故而点击Button(‘add num’)，虽然text的内容会改变，但是LocalStorage的num变量不会改变。同理Button(‘set num’)按钮点击不会修改影响任何Text。但是Button(‘set num 100’)会改变Text的内容，这是因为这个button内部，点击时使用.link()函数双向同步了LocalStorage中的num。
而被@LocalStorageLink装饰的变量，其修改会同步到LocalStorage中的str。
上述代码中，在子组件中使用到了.link()和.prop()函数。效果同@LocalStorageLink和@LocalStorageProp装饰器。

多视图共享LocalStorage

配置共享LocalStorage

在EntryAbility中声明需要共享的LocalStorage

  para:Record<string, any> = {'num' : 1,'str' : 'hello'};
  storage: LocalStorage = new LocalStorage(this.para);
  
  onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    //将LocalStorage共享到指定视图pages/Index
    windowStage.loadContent('pages/Index',this.storage);
  }

在指定视图中获取LocalStorage

//Index.ets
import router from '@ohos.router';
//获取到LocalStorage
let storage = LocalStorage.GetShared()
@Entry(storage)
@Component
struct Main{
	build(){
		Row(){
		    Column(){
			//......
			Button('go to another page')
          .backgroundColor('#793778c6')
          .onClick(()=>{
          //跳转到另一个page
            router.pushUrl({url:'pages/status/LocalStorage2'})
          })
			}
		}
	}
}

在跳转之后的页面获取LocalStorage

//LocalStorage2.ets
let storage = LocalStorage.GetShared()


@Entry(storage)
@Component
struct Main{
  @LocalStorageProp('num') num:number = 10;
  @LocalStorageLink('str') str:string = 'gg';
  build(){
    Row(){
      Column(){
        Text(`num: ${this.num}`)
          .fontSize(30)
        Text(`str: ${this.str}`)
          .fontSize(30)
   
      }
    }
  }
}

跳转到LocalStorage2页面后，页面展示的num:1，str:hello，而不是num:10，str:gg。因为LocalStorage的值为：{‘num’ : 1,‘str’ : ‘hello’}

注：LocalStorage.GetShared只在模拟器或者实机上才有效，不能在Preview预览器中使用。