HarmonyOS鸿蒙Next中Web组件removeCache与removeAllCache有什么区别，删除的资源优化不同？

HarmonyOS鸿蒙Next中Web组件removeCache与removeAllCache有什么区别，删除的资源优化不同？ Web组件removeCache与removeAllCache有什么区别，删除的资源优化不同？可以删除localStorage吗？

6 回复

removeCache与removeAllCache的区别

1. removeCache（实例方法）

  • 所属类：WebviewController
  • 作用范围：清除当前WebviewController关联的Web组件的资源缓存
  • 调用方式：this.controller.removeCache(clearRom)
  • 参数说明：
    • clearRom: boolean - true时同时清除ROM和RAM中的缓存，false时只清除RAM中的缓存
  • 特点：需要WebviewController与Web组件绑定后才能使用

2. removeAllCache（静态方法）

  • 所属类：WebviewController（静态方法）
  • 作用范围：清除同一应用中所有Webview的缓存文件
  • 调用方式：webview.WebviewController.removeAllCache(clearRom)
  • 参数说明：
    • clearRom: boolean - true时同时清除ROM和RAM中的缓存，false时只清除RAM中的缓存
  • 特点：影响范围更大，会清理应用内所有Web组件的缓存

详细可以参考 如何清除Web组件缓存-行业常见问题-实用工具类行业实践

删除的资源类型

两个方法清除的都是Web组件的资源缓存文件，包括：

  • 网页资源文件缓存
  • 图片等静态资源缓存
  • 不包含localStorage数据

更多关于HarmonyOS鸿蒙Next中Web组件removeCache与removeAllCache有什么区别，删除的资源优化不同？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


使用removeCache需要实例化webview，且webview需绑定controller完成后，才能调用removeCache()方法，觉得使用起来麻烦。

API 18以后，新增了removeAllCache这个静态方法，可直接调用。 文档给出的删除路径为：

data/app/el2/100/base/<applicationPackageName>/cache/web/

这是一个物理路径，会把web目录下的文件都删除。那么Local Storage应该是可以删除的。

通过鸿蒙沙箱浏览器 验证后发现 removeCache 只是删除了下图中红框的部分资源

data/storage/el2/base/cache/web/Cache/Cache_Data/

cke_217.png

而 Local Storage 从目录来看位于 /data/storage/el2/base/cache/web/Local Storage。

这么看来 removeCache 是无法删除 local Storage的。

cke_15245.png

目前手里的设备没有升到API18，暂时没有验证removeAllCache方法的效果。

不过，我们之前对于删除沙箱的web缓存，采用下面的方法，希望对你有帮助：

async clearWebCache() {
  const context = this.getUIContext().getHostContext()
  const moduleContext = await application.createModuleContext(context, 'entry');
  const path = moduleContext.cacheDir + '/web'
  const isDirectory = fileIo.statSync(path).isDirectory();
  if (isDirectory) {
    fileIo.rmdirSync(path)
  }
}

【问题背景】

  • Web 组件提供的removeCache与removeAllCache两个接口在功能上有何区别，尤其在删除资源的范围、优化逻辑上是否存在差异；
  • 这两个接口能否直接删除localStorage数据。

【解答思路】

  • “先区分两个缓存清除接口的差异，再说明localStorage的处理机制” 展开，具体逻辑如下：
  1. 先明确removeCache与removeAllCache的核心差异（从 “影响范围” 和 “使用条件” 切入）
  2. 两者虽均用于清除 Web 组件缓存，但因设计定位不同，在作用边界、调用前提、删除资源路径上存在显著区别，需结合开发场景选择：
  • 从 “作用范围” 看：removeCache是 “实例级” 接口，仅作用于当前创建的WebviewController实例，清除的是该实例加载的资源缓存（对应路径为应用内data/storage/el2/base/cache/web/Cache目录）；而removeAllCache是 “应用级” 静态接口，作用于整个应用的 Web 组件缓存，清除的是应用沙盒内所有 Web 缓存文件（对应路径为data/storage/el2/base/cache/web目录）。
  • 从 “调用条件” 看：removeCache需依赖已初始化的WebviewController实例（即 Web 组件先创建后才能调用）；removeAllCache无需初始化 Web 组件，且仅在 API18 及以上版本支持，直接通过webview.WebviewController静态调用即可。
  • 从 “参数与效果” 看：两者均接收boolean类型参数，true代表同时清除 ROM（本地持久化存储）和 RAM（内存临时存储）中的缓存，false仅清除 RAM 缓存；但因作用范围不同，removeCache仅影响当前实例的缓存状态，removeAllCache会清空整个应用的 Web 缓存，需谨慎使用（避免误删其他 Web 实例的必要缓存）。
  • 从 “代码实现” 看：removeCache通过this.controller.removeCache(...)（实例方法）调用，removeAllCache通过webview.WebviewController.removeAllCache(...)（静态方法）调用，需注意导入包和错误捕获逻辑的一致性（均需处理BusinessError异常，打印错误码和信息）。

2. localStorage的删除逻辑（明确 “不直接处理” 的核心结论）

removeCache与removeAllCache的设计目标是清除 Web 组件的资源缓存（如页面静态资源、请求缓存等），不包含对localStorage的直接删除能力。localStorage的删除依赖 JavaScript 垃圾回收（GC）机制：当LocalStorage实例的所有引用（如页面关闭、实例对象销毁）被完全释放后，GC 会自动识别并回收该实例的内存与数据，无需通过上述两个缓存接口主动处理。

补充说明：

Cache

使用cacheMode()配置页面资源的缓存模式，Web组件为开发者提供四种缓存模式，分别为：

  • Default：优先使用未过期的缓存。如果缓存不存在，则从网络获取。
  • None：加载资源使用缓存。如果缓存中无该资源，则从网络中获取。
  • Online：加载资源不使用缓存。全部从网络中获取。
  • Only：只从缓存中加载资源。

Dom Storage

Dom Storage包含了Session Storage和Local Storage两类。Session Storage为临时数据，其存储与释放跟随会话生命周期；Local Storage为持久化数据，保存在应用目录下。两者的数据均通过Key-Value的形式存储，在访问需要客户端存储的页面时使用

【官方文档——Web数据存储】

您好，removeCache作用范围为单个 Web 组件实例，

使用实例接口removeCache，清除应用中data/storage/el2/base/cache/web/Cache目录下所有的资源缓存文件，需要创建WebviewController实例对象之后调用。removeCache() 执行后仅删除当前WebviewController实例加载的资源。

import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  @State mode: CacheMode = CacheMode.None;
  controller: webview.WebviewController = new webview.WebviewController();

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

而removeAllCache的作用范围是全局应用级，

API18及以上版本可以使用静态接口removeAllCache，清除应用中“data/storage/el2/base/cache/web”目录中所有的缓存文件，Web组件未初始化时也可调用。removeAllCache() 执行后会删除应用沙盒中所有缓存文件。

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('removeAllCache')
        .onClick(() => {
          try {
            webview.WebviewController.removeAllCache(true);
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: 'www.example.com', controller: this.controller })
    }
  }
}

整个LocalStorage实例在其所有引用释放后 垃圾回收机制会自动删除。

removeCache用于删除Web组件中指定URL的缓存资源，包括内存缓存和磁盘缓存。removeAllCache则清除Web组件的全部缓存数据，包括所有URL的缓存资源、Cookie、本地存储等。两者删除范围不同，removeCache针对特定URL，removeAllCache清理全部缓存。资源优化方面，removeCache适用于精确清理特定页面缓存，removeAllCache用于整体重置Web组件的缓存状态。

在HarmonyOS Next的Web组件中，removeCache和removeAllCache方法的主要区别在于删除范围：

removeCache：删除指定URL的缓存资源，适用于清理特定页面的缓存数据，保留其他页面缓存，优化资源占用。

removeAllCache：清除Web组件所有已加载页面的缓存，适用于全局清理，释放全部缓存资源。

两者均针对网络缓存（如HTML、CSS、JS文件等），无法删除localStorage。localStorage属于浏览器API存储的持久化数据，需通过Web标准接口（如localStorage.clear()）在页面内操作。

回到顶部