了 @Provide/@Consume 可以跨組件傳遞數據外。

LocalStorage 也可以實現跨組件傳遞數據。

首先，我們在 Index.ets 頁面上創建 LocalStorage 的實例。

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

并在構造函數中初始化你要傳遞的數據，以 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 前面幾章已經詳細介紹過，這里就不再贅述了。

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

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

  build() {
  }
}

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

@Entry(storage)
@Component
struct Index {
  /**
   * 狀態變量
   */
  @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 {
  /**
   * 狀態變量
   */
  @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 {
  /**
   * 狀態變量
   */
  @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 {
  /**
   * 狀態變量
   */
  @LocalStorageLink("name") name: string="ItemB"

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

運行結果：

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

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

總結

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

者：semlinker 全棧修仙之路

轉發鏈接：https://mp.weixin.qq.com/s/I43IePa3y821sj9aBOrtnQ

ue實時監聽 localStorage 變化

應用場景：

1、頁面B需要實時獲取頁面A數據更改

2、父子頁面之間的傳參

代碼實例

B頁面實時獲取A頁面的數據變化

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

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

在【頁面B】需要監聽緩存值更改

mounted: function () {
    var that=this;

    //監聽 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;

        // 監聽到值后的處理邏輯
        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];

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

}

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

注意

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

參考文檔：

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

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