鸿蒙原生应用元服务开发WEB-缓存与存储管理

鸿蒙时代

发布于 2024-5-17 11:17

浏览

0收藏

在访问网站时，网络资源请求是相对比较耗时的。开发者可以通过Cache、Dom Storage等手段将资源保持至本地，以提升访问同一网站的速度。
Cache
使用cacheMode()配置页面资源的缓存模式，Web组件为开发者提供四种缓存模式，分别为：
Default : 优先使用未过期的缓存，如果缓存不存在，则从网络获取。
None : 加载资源使用cache，如果cache中无该资源则从网络中获取。
Online : 加载资源不使用cache，全部从网络中获取。
Only ：只从cache中加载资源。
在下面的示例中，选用缓存设置为None模式。

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

同时，为了获取最新资源，开发者可以通过removeCache()接口清除已经缓存的资源，示例代码如下：

/ xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Button('removeCache')
        .onClick(() => {
          try {
            // 设置为true时同时清除rom和ram中的缓存，设置为false时只清除ram中的缓存
            this.controller.removeCache(true);
          } catch (error) {
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
        .cacheMode(this.mode)
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.

Dom Storage
Dom Storage包含了Session Storage和Local Storage两类。前者为临时数据，其存储与释放跟随会话生命周期；后者为可持久化数据，落盘在应用目录下。两者的数据均通过Key-Value的形式存储，通常在访问需要客户端存储的页面时使用。开发者可以通过Web组件的属性接口domStorageAccess()进行使能配置，示例如下：

// xxx.ets
import web_webview from '@ohos.web.webview';

@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src: 'www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.

本文参考引用HarmonyOS官方开发文档，基于API9。

分类

HarmonyOS

标签

鸿蒙原生应用

51CTO

51CTO博客

51CTO学堂

鸿蒙原生应用元服务开发WEB-缓存与存储管理

订阅鸿蒙技术特刊，精选内容抢先看