uniapp 实现页面缓存

### UniApp 中清除页面缓存的方法 在开发过程中，如果需要清除页面缓存以确保每次加载的数据是最新的，则可以采用多种方法来实现这一目标。以下是针对不同场景下的解决方案： #### 一、Webview 的缓存清理 对于 Webview 加载外部资源时产生的缓存问题，可以通过调整后端服务器配置以及前端代码逻辑来进行处理。 1. **后端服务器配置** 在 Nginx 配置中设置 JS 和 CSS 文件的缓存时间为 `-1s` 可以强制浏览器不缓存这些静态文件： ```nginx location ~ .*.(js|css)?$ { expires -1s; error_log off; } ``` 2. **iOS 平台上的缓存禁用** 使用 `plus.ios` 提供的相关 API 来操作 iOS 系统中的 URL 缓存机制，具体如下： ```javascript let cache1 = plus.ios.newObject('NSURLCache'); let cache = plus.ios.invoke(cache1, 'sharedURLCache'); plus.ios.invoke(cache, 'removeAllCachedResponses'); plus.ios.invoke(cache, 'setDiskCapacity:', 0); plus.ios.invoke(cache, 'setMemoryCapacity:', 0); ``` 这些代码能够彻底清空内存和磁盘中的缓存记录[^1]。 3. **Android 平台上的缓存清理** 对于 Android 设备，可以直接调用 `plus.cache.clear()` 方法完成全局范围内的缓存删除工作： ```javascript plus.cache.clear(); ``` #### 二、页面跳转方式的选择 当涉及到本地页面之间的切换时，不同的跳转函数会对缓存行为产生影响。 - 如果使用 `uni.navigateTo` 跳转到新页面，原页面并不会被销毁而是保持其状态不变，这可能导致某些情况下出现数据残留现象。 - 改为使用 `uni.redirectTo` 则会先关闭当前活动页再导航至指定地址，从而避免上述隐患并触发重新渲染过程[^2]。 综上所述，在实际项目里可以根据需求灵活选用合适的策略组合起来达到最佳效果。 ```javascript // 示例：综合运用以上技术点的一个简单例子 function clearAndNavigate() { // 清理 WebView 缓存 (跨平台) if (/android/i.test(navigator.userAgent)) { plus.cache.clear(); } else if (/iphone|ipad|iPod/.test(navigator.userAgent)){ const cacheObj = plus.ios.newObject('NSURLCache'), sharedCache = plus.ios.invoke(cacheObj,'sharedURLCache'); plus.ios.invoke(sharedCache,'removeAllCachedResponses'); plus.ios.invoke(sharedCache,'setDiskCapacity:',0); plus.ios.invoke(sharedCache,'setMemoryCapacity:',0); } // 执行重定向动作代替普通的 navigateTo uni.redirectTo({ url:'/pages/targetPage/targetPage' }); } ```

在 Uniapp 中，可以通过设置页面的 `keepAlive` 属性来实现页面缓存。当 `keepAlive` 属性被设置为 `true` 时，页面在切换时将会被缓存，不会被销毁。 以下是一个示例代码： ```html <template> <view> <text>这是一个缓存的页面</text> </view> </template> <script> export default { keepAlive: true, // 设置页面缓存 } </script> ``` 在上面的示例中，页面被设置为缓存，当该页面被切换离开时，页面实例不会被销毁，下次再次进入该页面时，将会直接使用之前的实例，不会重新创建。 需要注意的是，只有在使用 `vue-router` 进行页面切换时，`keepAlive` 属性才会生效。如果使用其他方式进行页面切换，例如通过 `wx.navigateTo`、`navigateTo` 等方法，则页面不会被缓存。 另外，如果想要在某些情况下动态控制页面是否缓存，可以使用 `activated` 和 `deactivated` 生命周期函数，在这些生命周期函数中通过动态修改 `keepAlive` 属性来实现。