鴻蒙開發(fā)（七十四）：頁面級狀態(tài) LocalStora

鴻蒙開發(fā)（七十四）：頁面級狀態(tài) LocalStorage

了 @Provide/@Consume 可以跨組件傳遞數(shù)據(jù)外。

LocalStorage 也可以實現(xiàn)跨組件傳遞數(shù)據(jù)。

首先，我們在 Index.ets 頁面上創(chuàng)建 LocalStorage 的實例。

/**
 * LocalStorage 實例
 */
const storage=new LocalStorage()

并在構(gòu)造函數(shù)中初始化你要傳遞的數(shù)據(jù)，以 key/value 形式。

例如，{ name: "張三", age: 18 }。

/**
 * LocalStorage 實例
 */
const storage=new LocalStorage({ name: "張三", age: 18 })

然后，將 storage 傳給 @Entry 裝飾器。

/**
 * LocalStorage 實例
 */
const storage=new LocalStorage({ name: "張三", age: 18 })

@Entry(storage)
@Component
struct Index {
  build() {
  }
}

這一步的作用是將 LocalStorage 和頁面進行綁定。

接下來，我們就使用 LocalStorage 里面的值。

使用方式：@LocalStorageProp(key)/@LocalStorageLink(key)

LocalStorageProp 單向傳遞
LocalStorageLink 雙向傳遞

Prop 和 Link 前面幾章已經(jīng)詳細介紹過，這里就不再贅述了。

在 Index 組件里，定義一個 @LocalStorageLink(key) 裝飾的變量 name，key 為“name”，類型要和 LocalStorage 里面的數(shù)據(jù)類型一樣，并且該變量必須要設(shè)置默認值。

@Entry(storage)
@Component
struct Index {
  /**
   * 狀態(tài)變量
   */
  @LocalStorageLink("name") name: string="Index"

  build() {
  }
}

然后，在 build 函數(shù)里顯示 name，并通過點擊按鈕修改 name 的值。ItemA 是一個子組件。

@Entry(storage)
@Component
struct Index {
  /**
   * 狀態(tài)變量
   */
  @LocalStorageLink("name") name: string="Index"

  build() {
    Column() {
      Text(this.name)
      Button("Index按鈕")
        .onClick(()=> {
          this.name="Index更新"
        })

      ItemA()
    }
    .width('100%')
  }
}

ItemA 組件里使用 ItemB 子組件：

@Component
struct ItemA {
  build() {
    ItemB()
  }
}

在 ItemB 組件里定義一個 @LocalStorageLink(key) 裝飾的變量 name，key 為“name”，變量類型要和 LocalStorage 里定義的一樣，變量還要有默認值：

@Component
struct ItemB {
  /**
   * 狀態(tài)變量
   */
  @LocalStorageLink("name") name: string="ItemB"

  build() {
    Column() {
      Text(this.name)
      Button("ItemB按鈕")
        .onClick(()=> {
          this.name="ItemB更新"
        })
    }
  }
}

完整代碼：

/**
 * LocalStorage 實例
 */
const storage=new LocalStorage({ name: "張三", age: 18 })

@Entry(storage)
@Component
struct Index {
  /**
   * 狀態(tài)變量
   */
  @LocalStorageLink("name") name: string="Index"

  build() {
    Column() {
      Text(this.name)
      Button("Index按鈕")
        .onClick(()=> {
          this.name="Index更新"
        })

      ItemA()
    }
    .width('100%')
  }
}

@Component
struct ItemA {
  build() {
    ItemB()
  }
}

@Component
struct ItemB {
  /**
   * 狀態(tài)變量
   */
  @LocalStorageLink("name") name: string="ItemB"

  build() {
    Column() {
      Text(this.name)
      Button("ItemB按鈕")
        .onClick(()=> {
          this.name="ItemB更新"
        })
    }
  }
}

運行結(jié)果：

從運行結(jié)果來看，修改 Index 組件中 name 的值，Index 和 ItemB 組件的UI刷新。

修改 ItemB 組件中 name 的值，Index 和 ItemB 組件的UI也會刷新。

總結(jié)

創(chuàng)建 LocalStorage 實例，并在構(gòu)造函數(shù)完成初始化操作。
將 LocalStorage 與 @Entry 裝飾器進行綁定。
使用 @LocalStorageProp/@LocalStorageLink 裝飾需要同步的變量，變量必須初始化。

者：semlinker 全棧修仙之路

轉(zhuǎn)發(fā)鏈接：https://mp.weixin.qq.com/s/I43IePa3y821sj9aBOrtnQ

ue實時監(jiān)聽 localStorage 變化

應(yīng)用場景：

1、頁面B需要實時獲取頁面A數(shù)據(jù)更改

2、父子頁面之間的傳參

代碼實例

B頁面實時獲取A頁面的數(shù)據(jù)變化

在【頁面A】進行緩存修改or插入緩存

localStorage.setItem('product_process_uid', parentinputname + '#' + data.uid + '#' + data.nickname);

在【頁面B】需要監(jiān)聽緩存值更改

mounted: function () {
    var that=this;

    //監(jiān)聽 localStorage 緩存中指定key的值變化,本例key為 product_process_uid
    window.addEventListener('storage', function (e) {
      if (e.key && e.key=='product_process_uid' && e.newValue) {
        that.product_process_uid=e.newValue;

        // 監(jiān)聽到值后的處理邏輯
        that.product_process_uid=that.product_process_uid.split('#');
        that.formData.product_process[that.product_process_uid[0]].user_id=that.product_process_uid[1];
        that.formData.product_process[that.product_process_uid[0]].user_name=that.product_process_uid[2];

        // 根據(jù)實際情況，判斷處理完后是否要刪除這個key
        localStorage.removeItem('product_process_uid');
      }
    })

}

如上即可在【頁面B】實時獲取到【頁面A】中的數(shù)據(jù)。

注意

頁面必須是同源（即同一個域名，例如：都在https://www.baidu.com/域名下）

參考文檔：

https://blog.csdn.net/qq_38902230/article/details/110233216

https://www.muouseo.com/article/rpnv35ewm5.html

在線咨詢

上一篇：類似Visio的Web版繪圖工具：JsPlumb
下一篇：學(xué)html5需要什么基礎(chǔ)？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商