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

Posted 2023-02-16 L_不觉晓晓

一、需求分析：

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代码：

<script>
import 
  reactive,
  onMounted,
  getCurrentInstance,
 from 'vue';
import  Dialog  from 'vant';

export default 
  setup() 
    const  proxy  = getCurrentInstance();
    const state = reactive(
      cache: '', // 缓存
    );

    // 获取缓存大小
    const calculate = () => 
      plus.cache.calculate((size) => 
        let fileSizeString = '';
        if (size === 0) 
          fileSizeString = "0B";
         else if (size < 1024) 
          fileSizeString = size + "B";
         else if (size < 1048576) 
          fileSizeString = (size / 1024).toFixed(2) + "KB";
         else if (size < 1073741824) 
          fileSizeString = (size / 1048576).toFixed(2) + "MB";
         else 
          fileSizeString = (size / 1073741824).toFixed(2) + "GB";
        
        state.cache = fileSizeString;
      );
    ;

    /* 页面初始化获取缓存大小 */
    onMounted(async () => 
	  // 调用方法	
      calculate();
    );

    // 清理缓存
    const clearCache = async () => 
      Dialog.confirm(
        title: '提示',
        message: '确定清除缓存吗？',
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        confirmButtonColor: '#3BB3C2',
      ).then(() => 
        /* 调用清除缓存方法 */
        plus.cache.clear(() => 
          calculate();
        );
      );
    ;

    return 
      state,
      clearCache,
    ;
  ,
;
</script>

没用使用过Html5+请参考另一篇博客：如何在Vue项目里面使用Html5+