ArkTS-LocalStorage页面级UI状态存储

let storage = new LocalStorage({'PropA: 47'});//创建新实例并使用给定对象初始化
let propA = storage.get('PropA')// propA == 47
let link1 = sotrage.link('PropA'); // link1.get() == 47
let link2 = storage.link('PropA'); // link2.get() == 47
let prop = storage.prop('PropA'); // prop.get() == 47
link1.set(48); // two-way sync: link1.get() == link2.get() == prop.get() == 48
prop.set(1); // one-way sync: prop.get()=1; but link1.get() == link2.get() == 48
link1.set(49); //two-way sync: link1.get() == link2.get() == prop.get() == 49

//创建新实例并使用给定对象初始化
let storage = new LocalStorage({'PropA':47});

@Component
struct Child{
    //@LocalStorageLink变量装饰器与LocalStorage中的'PropA'属性建立双向绑定
    @LocalStorageLink('PropA') storLink2: number = 1;
    
    build(){
        Button(`Child from LocalStorage ${this.storLink2}`)
        //更改将同步至LocalStorage中的'ProA'以及Parent.stoLink1
        	.onClick(()=>this.storLink2 +=1)
    }
}

//使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA{
    //@LocalStorageLink变量装饰器与LocalStorage中的'ProA'属性建立双向绑定
    @LocalStorageLink('PropA') storLink1: number = 1;
    
    build(){
        Column({space: 15}){
            Button(`Parent from LocalStorage ${this.storLink1}`)//initial value from LocalStorage will be 47,because 'PropA' initialized already
            	.onClick(()=>this.storLink1 +=1)
            //@Component 子组件自动获得对CompA LocalStorage实例的访问权限。
            Child()
        }
    }
}

//创建新实例并使用给定对象初始化
let storage = new LocalStorage({'PropA':47});
//使LocalStorage可从@Component组件访问
@Entry(storage)
@Component
struct CompA{
    //@LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定
    @LocalStorageProp('PropA') storProp1: number = 1;
    
    build(){
        Column({space: 15}){
            //点击后从47开始加1，只改变当前组件显示的storProp1，不会同步到LocalStorage中
            Button(`Parent from LocalStorage ${this.storProp1}`)
            	.onClick(()=> this.storProp1 +=1)
            Child()
        }
    }
}

//创建新实例并使用给定对象初始化
let storage = new LocalStorage({'PropA':47});
//使LocalStorage可从Component组件访问
@Entry(storage)
@Component
struct CompA{
    //@LocalStorageProp变装装饰器与LocalStorage中的'ProA'属性建立单向绑定
    @LocalStorageProp('PropA') storProp1: number =1;
    
    build(){
        Column({space: 15}){
            //点击后从47开始加1，只改变当前组件显示的storProp1，不会同步到LocalStorage中
            Button(`Parent from LocalStorage ${this.storProp1}`)
            	.onClick(()=> this.storProp1 += 1)
            Child()
        }
    }
}

@Component
struct Child{
    //@LocalStorageProp变量装饰器与LocalStorage中的'ProA'属性建立单向绑定
    @LocalStorageProp('PropA') storProp2: number = 2;
    
    build(){
        Column({space: 15}){
            //当CompA改变时，当前storProp2不会改变，显示47
            Text(`Parent from LocalStorage ${this.storProp2}`)
        }
    }
}

//构造LocalStorage实例
let storage = new LocalStorage({'PropA:47'});
//调用link9+接口改造'PropA'的双向同步数据，linkToPropA是全部变量
let linkToPropA = storage.link('PropA');

@Entry(storage)
@Component
struct CompA{
    //@LocalStorageLink('PropA')在CompA自定义组件中创建'PropA'的双向同步数据，初始值为47，
    @LocalStorageLink('PropA') storLink: number =1;
    
    build(){
        Column(){
            Text(`incr @LocalStorageLink variable`)
            //点击“incr @LocalStorageLink variable”，this.storLink加1，改变同步回storage，全局变量linkToPropA也会同步
            .onClick(()=>this.storLink +=1)
            
            //并不建立在组件内使用全局变量linkToPropA.get(),因为可能会有生命周期不同引起的错误。
            Text(`@LocalStorageLink: ${this.storLink} - linkToPropA: ${linkToPropA.get()}`)
        }
    }
}

let storage = new LocalStorage({countStorage:1});

@Component
struct Child{
    //子组件实例的名字
    label: string = 'no name';
    //和LocalStorage中“countStorage”的双向绑定数据
    @LocalStorageLink('countStorage') playCountLink: number = 0;
    build(){
        Row(){
            Text(this.label)
            	.width(50).height(60).fontSize(12)
            Text(`playCountLink ${this.playCountLink}: inc by 1`)
            	.onClick(()=>{
                	this.playCountLink +=1;
            })
            .width(200).height(60).fontSize(12)
        }.width(300).height(60)
    }
}

@Entry(storage)
@Component
struct Parent{
    @LocalStorageLink('countStorage') playCount: number = 0;
    
    build(){
        Column(){
            Row(){
                Text('Parent')
                	.width(50).height(60).fontSize(12)
                Text(`playCount ${this.playCount} dec by 1`)
                	.onClick(()=>{
                    this.playCount -= 1;
                })
                
                .width(250).height(60).fontSize(12)
            }.width(300).height(60)
            
            Row(){
                Text('LocalStorage')
                	.width(50).height(60).fontSize(12)
                Text(`countStorage ${this.playCount} incr by 1`)
                	.onClick(()=>{
                    storage.set<number>('countStorage',1+storage.get<number>('countStorage'));
                })
                .width(250).height(60).fontSize(12)
            }.width(300).height(60)
            
            Child({label:'ChildA'})
            Child({label: 'ChildB'})
            
            Text(`playCount in LocalStorage for debug ${storage.get<number>('countStorage')}`)
            	.width(300).height(60).fontSize(12)
        }
    }
}

//EntryAbility.ts
import UIAbility from '@obos.app.ability.UIAbility';
import window from '@ohos.window';

export default class EntryAbility extends UIAbility{
    storage: LocalStorage = new LocalStorage({
        'PropA':47
    });
    
    onWindowStageCreate(windowStage: window.WindowStage){
        windowStage.loadContent('pages/Index',this.storage);
    }
}

//通过GetShared接口获取stage共享的Storage实例
let storage = LocalStorage.GetShared()

@Entry(storage)
@Component
struct CompA{
    //can access LocalStorage instance using
    //@LocalStorageLink/Prop decorated variables
    @LocalStorageLink('PropA') varA: number = 1;
    
    build(){
        Column(){
            Text(`${this.varA}`).fontSize(50)
        }
    }
}