ionic应用程序文件保存和清除缓存

一.简介

在开发ionic应用程序中，我们难免会涉及到文件的下载，并且将下载的文件(可以是png，pdf，zip等文件)保存到本地，时间一久，文件堆积过多，就需要对缓存进行清理以减少占用手机空间。我们先讲一下文件的保存，然后再讲清除缓存。

二.文件的保存

顺便提一下，关于文件的下载，有2篇文件讲得不错大家可以借鉴一下，前者是讲通过fileTransfer插件来进行文件的下载，后者通过XMLHttpRequest来进行文件的下载(因为fileTransfer已经过期，github上说可以使用XMLHttpRequest)，我这边也是使用后一篇文章介绍的方法来处理文件下载。

我们讲讲文件的保存，需要用到的插件：

cordova-plugin-file

如果需要打开下载之后的文件，可以使用：

cordova-plugin-file-opener2

上面两个插件file和file-opener2的安装方法参照ionic官网的文档即可。 这里需要注意一下，由于我使用的是ionic3进行开发，如今ionic4已经出来一段时间了。

安装完opener2后，进行build android就遇到了比较多的问题，我不太确定是不是这个插件的影响，但是在安装这个插件之前build android是没有报错的：

1.安装opener2之后，进行ionic cordova build android，如果报错unable to merge dex，可以使用cordova clean android，再使用ionic cordova build android(我是直接cordova platform rm android，然后cordova platform add android，最后再ionic cordova build android来解决问题的，如果上面不能解决的话，就试试我这种rm平台的方法)。

2.安装opener2之后，如果build android报错‘Attribute meta-data#android.support.VERSION’的话，需要去到项目的platform-android-build.gradle路径，在build.gradle文件中加入以下代码，其中的‘25.3.1’就是你报错中要支持的版本：

android.support.version.png
configurations.all {resolutionStrategy.eachDependency { DependencyResolveDetails details ->def requested = details.requestedif (requested.group == 'com.android.support') {if (!requested.name.startsWith("multidex")) {details.useVersion '25.3.1'}}}
}

保存文件前，先创建一个文件夹用来存放下载的文件，起名为myFile：

checkDir(){if(this.device.platform == null) {return;}let that = this;//获取路径let path;if(that.platform.is('ios')){//iospath = that.file.cacheDirectory;}else {path = that.file.externalCacheDirectory;}that.file.checkDir(path,"myFile").then(isExist=>{if(isExist){console.log("---checkDir 文件夹已经存在----");}else {console.log("---文件夹不存在----");//创建文件夹that.file.createDir(path,"myFile",true).then(()=>{console.log("---创建文件夹成功----");}).catch(() => {console.log("---创建文件夹失败----");});}}).catch(() => {console.log("---checkDir 失败----");//创建文件夹that.file.createDir(path,"myFile",true).then(()=>{console.log("---创建文件夹成功----");}).catch(() => {console.log("---创建文件夹失败----");});});
}

先检查有没有这个文件夹，没有才创建；存放文件夹的位置放在了cache里面。

保存并打开文件：

writeAndOpenFiles(url){console.log("--writeAndopenFiles--");let that = this;//获取fileNamelet fileName;fileName = url.substring(url.lastIndexOf('/') + 1,url.length);//获取路径let path;if(that.platform.is('ios')){//iospath = that.file.cacheDirectory;}else {path = that.file.externalCacheDirectory;}path = path + "myFile/";//第一次下载之后，需要先保存才能打开that.file.writeFile(path, fileName,blob, {replace: true}).then(()=>{console.log("--writeFile success--");//openlet mimeType = that.getFileMimeType(fileName);that.fileOpener.open(path + fileName, mimeType).then(() => {console.log('打开成功');}).catch(() => {console.log('打开失败');});}).catch((err=>{console.log("--writeFile fail--");}));
}getFileMimeType(fileName: string): string {let mimeType: string = '';//获取文件的类型let fileType = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length).toLowerCase();switch (fileType) {case 'txt':mimeType = 'text/plain';break;case 'docx':mimeType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';break;case 'doc':mimeType = 'application/msword';break;case 'pptx':mimeType = 'application/vnd.openxmlformats-officedocument.presentationml.presentation';break;case 'ppt':mimeType = 'application/vnd.ms-powerpoint';break;case 'xlsx':mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';break;case 'xls':mimeType = 'application/vnd.ms-excel';break;case 'zip':mimeType = 'application/x-zip-compressed';break;case 'rar':mimeType = 'application/octet-stream';break;case 'pdf':mimeType = 'application/pdf';break;case 'jpg':mimeType = 'image/jpeg';break;case 'png':mimeType = 'image/png';break;default:mimeType = 'application/' + fileType;break;}return mimeType;}

其中的url是下载的文件地址，blob是下载成功之后得到的文件数据，'myFile/'是存放下载文件的位置。注意一点，file.writeFile成功的话，success和fail的回调都会相应，不知道算不算file插件的bug。

三.清除缓存

清除缓存实际上就是清除下载的文件，对于我而言仅需清除cache里面的文件即可。 清除之前，可以计算一下所占的缓存容量并且显示在app上：

caculateCacheSize(){let that = this;//获取路径let path;if(that.platform.is('ios')){//iospath = that.file.cacheDirectory;}else {path = that.file.externalCacheDirectory;}that.file.listDir(path,"myFile").then(entry=>{console.log('---listDir成功---' + entry.length);let totalSize = 0;for(let i = 0;i < entry.length;i++){entry[i].getMetadata((metadata)=>{console.log("--metadata.size--" + metadata.size);totalSize = totalSize + metadata.size;if(i == entry.length - 1){that.formatSize(totalSize);}},()=>{})}}).catch(err => {console.log('---listDir失败---' + err);});
}formatSize(size){let tempSize = (parseFloat(size))/(1024*1024);console.log("---tempSize---" + tempSize);if(tempSize >= 0 && tempSize < 1024){//MBtempSize = Math.floor(tempSize * 100)/100;this.sizeStr = tempSize + "MB";}else {//GBtempSize = Math.floor(tempSize * 100)/100;this.sizeStr = tempSize/1024 + "GB";}console.log("---sizeStr---" + this.sizeStr);
}

其中的this.sizeStr就是占用的内存，这里只算了MB和GB，大家可以根据自身需求修改KB等。

清除缓存：

clearCache(){if(this.device.platform == null) {this.methodsProvider.showToast("请在真实的手机设备上清除缓存");return;}let that = this;//获取路径let path;if(that.platform.is('ios')){//iospath = that.file.cacheDirectory;}else {path = that.file.externalCacheDirectory;}that.file.checkDir(path,"myFile").then(isExist=>{if(isExist){console.log("---checkDir 文件夹已经存在----");//移除文件夹及其里面的文件that.file.removeRecursively(path,"myFile").then(removeResult=>{that.methodsProvider.showToast("清除缓存成功");}).catch(err => {that.methodsProvider.showToast("清除缓存失败");});}else {that.methodsProvider.showToast("清除缓存成功");}}).catch(() => {console.log("---checkDir 失败----");that.methodsProvider.showToast("清除缓存成功");});
}

注意这里使用file.removeRecursively 是清除文件夹和文件夹里面的文件，文件夹里面有文件的话，就不要使用file.removeDir，这个仅仅是删除文件夹，否者会报错。

四.总结 对于ionic应用程序的清除缓存，想到的就是清除你已经下载到本地的文件，当然还有localStorage的数据清除，如果还有其他的清除，请各位给我留言，大家共同进步。

转载自：https://www.jianshu.com/p/db1f687d274d