uniapp h5如何清除缓存并重新获取资源

在uniapp开发的H5页面中，如何彻底清除缓存并强制重新加载资源？我尝试过修改版本号、清理浏览器缓存，但部分静态资源还是从本地缓存加载。有没有办法通过代码控制或配置让所有资源都从服务器重新获取？

2 回复

在uniapp的H5端，可以通过以下方式清除缓存并重新获取资源：

  1. 清除缓存：
uni.clearStorageSync() // 清除本地存储
location.reload(true) // 强制刷新页面
  1. 重新获取资源：
  • 修改资源URL添加时间戳参数
  • 使用uni.request重新请求接口数据
  • 设置HTTP缓存控制头

建议在需要更新时提示用户手动刷新页面。


在 UniApp H5 中清除缓存并重新获取资源，可以通过以下几种方法实现：

1. 清除缓存并强制刷新页面

  • 方法：使用 location.reload(true) 强制从服务器重新加载页面，忽略缓存。
  • 代码示例：
    // 清除缓存并刷新页面
location.reload(true);
  • 说明：参数 true 表示强制从服务器获取资源，但部分浏览器可能不支持此参数。

2. 通过修改资源 URL 参数

  • 方法：为静态资源（如 JS、CSS）添加时间戳或版本号，使浏览器重新请求。
  • 代码示例：
    // 为资源 URL 添加时间戳
const timestamp = new Date().getTime();
const newScriptUrl = `/path/to/script.js?t=${timestamp}`;
  • 说明：适用于动态加载的资源，确保每次请求的 URL 不同。

3. 使用 Service Worker 清除缓存

  • 方法：通过 Service Worker 删除旧的缓存，并重新获取资源。
  • 代码示例：
    // 在 Service Worker 中清除缓存
caches.keys().then(cacheNames => {
  cacheNames.forEach(cacheName => {
    caches.delete(cacheName);
  });
});
  • 说明：需要先注册 Service Worker，适用于 PWA 应用。

4. 清除 localStorage 和 sessionStorage

  • 方法：清除本地存储的数据，但不会直接影响资源缓存。
  • 代码示例：
    // 清除 localStorage
localStorage.clear();
// 清除 sessionStorage
sessionStorage.clear();
  • 说明：适用于清除应用数据，而非资源缓存。

5. 使用 UniApp 提供的 API

  • 方法：通过 uni.clearStorage() 清除本地存储，但资源缓存需结合上述方法。
  • 代码示例：
    // 清除 UniApp 的本地存储
uni.clearStorage();
// 结合强制刷新
location.reload(true);
  • 说明：uni.clearStorage() 仅清除存储数据，不涉及资源缓存。

完整操作建议：

  1. 清除本地存储（如 uni.clearStorage()）。
  2. 强制刷新页面（如 location.reload(true)）。
  3. 若需彻底更新静态资源，建议在打包时添加版本号。

根据需求选择合适的方法，通常结合使用效果更佳。

回到顶部