APP开发-Vue3+Vant+Html5+ 实现管理应用缓存以及清除缓存

一、需求分析：

1、显示APP缓存大小，并且可以清除缓存。
2、一般app上都会在设置模块有清除缓存的功能。这里的缓存指的是磁盘缓存。在iOS系统上对应的是沙盒路径下的缓存。一般清除缓存无非两样：图片缓存和其他资源文件缓存。

二、技术分析

通过调查资料，发现在Html5+上有关于管理应用缓存的API----Cache
在它提供的API方法里面有计算应用已使用的缓存数据大小方法（calculate），和清除应用的缓存数据方法（clear）。
清除缓存的时候，要弹出一个Dialog对话框，点击确认的时候再清除缓存，我们需要用到Vant组件的Dialog。

具体方法可以查看官网。
html5+官网：https://www.dcloud.io/docs/api/zh_cn/cache.html
Vant官网： https://vant-contrib.gitee.io/vant/v3/#/zh-CN/dialog

三、效果图

四、html代码：

<template>
  <div>
    <!-- 缓存 -->
    <van-cell :value="state.cache" is-link @click="clearCache" title="清理缓存" />
  </div>
</template>

五、js代码：