基于H5+的方法实现APP手机文件夹得存储

目前采用得是Uni-app框架，语法是vue语法，实现IO文件夹读取采用得是H5+里面得方法。

在项目中需求把数据存储在本地，这样可以减少网络请求得次数。优化了用户交互。

看了H5+得文档后,首先我们得确定把文件存储在那个目录下。
在这里插入图片描述
文档有四个目录，我选择得是用PUBLIC_DOCUMENTS目录，把文件存放在这个目录下。
首先通过：
plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(success) {} 方法进入了documents目录下，他给了我一个回调success，我需要在他得根目录下建立一个txt文档用于存放我得json数据

success.root.getFile('StorageQipu.txt', {create: true}, function(entry) {
		},function(e){
		console.log('创建出错')
		}

我通过getFile()方法在根目录下查找并创建（其实就是找不到该文件就创建一个新的）了一个 StorageQipu.txt得文件，第三个function是成功得回调，第四个function是失败得回调

创建成功后我就通过回调通过createWriter 方法来创建写入对象。

entry.createWriter(
function(suc) {

},
function(err){
console.log("写入失败")
}
)

由于业务关系我采用 var a = {a:123,b:456} 对象得方法来存放我得数据

**

因为txt文件夹里存放得都是字符串形式得数据，所以我需要把对象 a转换成字符串,js有已经固定得方法来把对象转换成字符串，我通过var jsonArray =JSON.stringify(a) 把对象转换成字符串。

接下来就是存入我们的数据。
因为我们的写入对象已经创建好了，所以可以用write(str) 方法来写入我们的数据。具体代码

if (suc.length == 0) { //如果没有存放过长度应为0直接添加
		suc.write(JsonArray)
} else { //存放过就从最后开始添加
		suc.seek(suc.length)
		suc.write('^' + JsonArray)
}

suc有length属性，可以查看文件内容的长度，seek（）方法选择需要写入的地方（断点\位置）这段代码的意思就是如果我是第一次进行写入内容，那么就直接写入，如果不是那么我门就从内容的最后进行写入，有点数组中push的意思

我把写入的文件夹的代码封装成一个函数进行全局调用

function StorageQipu(JsonArray) {
	var JsonArray = JSON.stringify(JsonArray); //把jsons转换成字符串
	plus.io.requestFileSystem(plus.io.PUBLIC_DOCUMENTS, function(success) {
		success.root.getFile('StorageQipu.txt', {
			create: true
		}, function(entry) {
			//console.log(plus.io.convertLocalFileSystemURL(entry.toURL()));
			entry.createWriter(function(suc) {
				if (suc.length == 0) { //如果没有存放过长度应为0直接添加
					suc.write(JsonArray)
				} else { //存放过就从最后开始添加
					suc.seek(suc.length)
					suc.write('^' + JsonArray)
				}
				return 'ok'
			}, function(eee) {
				return '写入失败,' + ee.message
			})
		}, function(ee) {
			return '创建失败,'+ ee.message
		})
	}, function(e) {
		return e.message + '获取目录'
	});
}

封装好后 export { StorageQipu } 出去,然后在main.js中进行全局注册，先引入import {StorageQipu} from './js/CommonFun.js'，再Vue.prototype.$StorageQipu = StorageQipu;进行全局注册，把该方法挂载在Vue原型上，

然后就可以在任意一个页面通过 this.$StorageQipu(str) 进行调用了

接下来写读取文件的内容，需求是我在棋谱页面开始之前需要加载文件中的内容。于是我在onLoad()（ PS：uni-app中的onLoad等于Vue中的careated） 中写读取的方法

首先通过 *plus.io.resolveLocalFileSystemURL()方法进入需要读取的地址，这个方法是可以通过URL地址进行查找,具体代码 _documents就是代表的是documents目录

plus.io.resolveLocalFileSystemURL('_documents/StorageQipu.txt', function(entry) {},function(err){}） //找到文件后，成功返回一个文件管理对象entry

其次创建读取对象let reader = new plus.io.FileReader();

再通过readAsText方法文件操作对象 reader.readAsText(entry); 接下来你就可以读取你的文件了。

通过reader.onload 进行读取，具体代码如下

		onLoad() {
			let item;
			let _this = this;
			plus.io.resolveLocalFileSystemURL('_documents/StorageQipu.txt', function(entry) {
				let reader = new plus.io.FileReader();
				reader.readAsText(entry);
				reader.onload = function(e) {
					console.log(e.target.result)
					if (e.target.result.length == 0) {
						_this.returnLen = false
					} else {
						_this.returnLen = true
						item = 0
						for (var i = 0; i <= e.target.result.length; i++) {
							if (e.target.result[i] == '^') {
								var a = e.target.result.slice(item, i) //把字符串转为对象
								_this.content.push(JSON.parse(a));
								item = i + 1;
								console.log(_this.content)
							}
							if (i == e.target.result.length) {
								var a = e.target.result.slice(item, i)
								_this.content.push(JSON.parse(a));
								console.log(_this.content)
							}
						}
					}
				}
			}, function(ee) {
				console.log(ee.message)
			})
		}

读取之后可以通过e.target.result 获取内容，也可以通过length属性查看他的长度，接下来就是解析json字符串了，由于之前我们存入的不是一个正常的json数据格式，所以需要对字符串进行处理后，通过JSON.parse方法来把字符串转换成对象。

基于H5+的方法实现APP手机文件夹得存储

**

猜你喜欢