HarmonyOS 鸿蒙Next web组件是否提供了localstorage方法

发布于 1周前 作者 sinazl 来自 鸿蒙OS

HarmonyOS 鸿蒙Next web组件是否提供了localstorage方法

web组件是否提供了localstorage方法，h5页面调用localstorage.setItem报错: “TypeError: Cannot read properties of null (reading ‘setItem’)”, source: https://xxxxxx.com/xxxx/bundle.min.js (2)

Harmonyos Next教程
2 回复 
//index.ets

import webview from '@ohos.web.webview';

import web_webview from '@ohos.web.webview';

@Entry

@Component

struct Index {

  @State message: string = 'Hello World'

  @State title: string = '欢迎世界'

  private scrollerForScroll: Scroller = new Scroller()

  webviewController: web_webview.WebviewController = new web_webview.WebviewController();

  @State customUserAgent: string = '';

  @State userAgent: string = '';

  aboutToAppear(): void {

    webview.once('webInited', () => {

      try {

        // 初始化完成时获取UserAgent。

        // Mozilla/5.0 (Phone; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36  ArkWeb/4.1.6.1 Mobile

        this.userAgent = this.webviewController.getUserAgent();

      } catch (error) {

        console.error(`get init UserAgent Error: ${JSON.stringify(error)}`);

      }

    })

  }

  build() {

    Scroll() {

      Column() {

        Web({

          src: $rawfile('index.html'),

          controller: this.webviewController

        })

      }

    }

    .scrollBar(BarState.Off)

  }

}

//index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

<h1>视频测试</h1>

<video src="https://oss-sit-sh-train.oss-cn-shanghai.aliyuncs.com/app/data/front/1834865347254034432/VID_20240914_160226.mp4" id="media-video-0" controls="controls" preload="true" poster="https://oss-sit-sh-train.oss-cn-shanghai.aliyuncs.com/app/data/front/1834865347254034432/VID_20240914_160226.mp4?x-oss-process=video/snapshot,t_10000,m_fast" x5-video-orientation="landscape|portrait" playsinline="true" webkit-playsinline="true" x5-playsinline="true" style="width: 100%; height: auto; margin-bottom: -0.11rem;"></video>

<video src="https://oss-sit-sh-train.oss-cn-shanghai.aliyuncs.com/app/data/front/1834866119505092608/trim.A58AD1B0-4D96-477A-9BAE-DEF9276DD0B6.MOV" id="media-video-1" controls="controls" preload="true" poster="https://oss-sit-sh-train.oss-cn-shanghai.aliyuncs.com/app/data/front/1834866119505092608/trim.A58AD1B0-4D96-477A-9BAE-DEF9276DD0B6.MOV?x-oss-process=video/snapshot,t_10000,m_fast" x5-video-orientation="landscape|portrait" playsinline="true" webkit-playsinline="true" x5-playsinline="true" style="width: 100%; height: auto; margin-bottom: -0.11rem;"></video>

<video src="https://oss-sit-sh-train.oss-cn-shanghai.aliyuncs.com/app/data/front/1834781037121511424/SVID_20240914_101236_1.mp4" id="media-video-2" controls="controls" preload="true" poster="https://oss-sit-sh-train.oss-cn-shanghai.aliyuncs.com/app/data/front/1834781037121511424/SVID_20240914_101236_1.mp4?x-oss-process=video/snapshot,t_10000,m_fast" x5-video-orientation="landscape|portrait" playsinline="true" webkit-playsinline="true" x5-playsinline="true" style="width: 100%; height: auto; margin-bottom: -0.11rem;"></video>

</body>

</html>

HarmonyOS 鸿蒙Next web组件未直接提供localstorage方法，但提供了类似功能的存储机制。

在HarmonyOS 鸿蒙Next中，虽然Web组件本身没有直接提供localstorage这样的API，但开发者可以利用ArkTS框架提供的LocalStorage机制来实现类似的功能。LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”，它支持UIAbility实例内多个页面间状态共享。开发者可以通过创建LocalStorage实例，并使用@LocalStorageProp和@LocalStorageLink装饰器来在UI组件内部获取状态变量，实现数据的持久化和同步。

需要注意的是，LocalStorage的使用有一定的规则和限制，如参数类型要求、属性类型不可更改等。开发者在使用时需要仔细阅读相关文档，确保正确使用。

如果开发者在HarmonyOS 鸿蒙Next的Web组件开发中需要实现数据的本地存储和同步，可以考虑使用LocalStorage或其他类似的存储机制。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

回到顶部