uniapp web-view 如何清除缓存

在uniapp中使用web-view组件加载H5页面时，如何彻底清除缓存？每次修改H5页面内容后，web-view仍然加载旧版本，尝试过修改src参数追加时间戳、调用uni.clearStorage()都没有效果。请问有没有强制刷新或清除web-view特定缓存的方法？

2 回复

在uniapp中，web-view组件清除缓存的方法：

  1. 给web-view添加:key属性，通过改变key值强制重新加载
<web-view :key="webviewKey" src="https://xxx.com"></web-view>
  1. 在需要清除缓存时，修改key值：
this.webviewKey = Date.now()
  1. 或者使用uni.reLaunch或uni.redirectTo跳转页面重新加载

这样可以强制web-view重新加载并清除缓存内容。


在 UniApp 中，web-view 组件本身不提供直接清除缓存的方法，因为缓存管理通常由系统或浏览器控制。但可以通过以下方法间接实现缓存清除：

方法一：通过 URL 参数强制刷新（推荐）

在 web-view 的 src 后添加随机参数或时间戳，使浏览器重新加载资源而非使用缓存：

<web-view :src="urlWithTimestamp"></web-view>

export default {
  data() {
    return {
      baseUrl: 'https://example.com',
    };
  },
  computed: {
    urlWithTimestamp() {
      return `${this.baseUrl}?t=${Date.now()}`; // 添加时间戳参数
    },
  },
};

方法二：清除 H5 页面缓存（需 H5 配合）

在 H5 页面中添加以下元标签，禁止缓存：

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

方法三：清除整个应用缓存（极端情况）

通过 uni.clearStorage() 清除本地存储，但注意这会影响整个应用数据：

uni.clearStorage(); // 清除所有本地缓存

注意事项：

  1. 平台差异：不同平台（如 iOS、Android）对 web-view 缓存策略可能不同。
  2. 局限性：无法直接清除 web-view 的 DNS 或内存缓存。
  3. 用户体验：频繁清除缓存可能导致加载变慢。

建议优先使用方法一，通过动态 URL 参数确保内容更新。

回到顶部