基于H5+的方法实现APP手机文件夹得存储
目前采用得是Uni-app框架,语法是vue语法,实现IO文件夹读取采用得是H5+里面得方法。在项目中需求把数据存储在本地,这样可以减少网络请求得次数。优化了用户交互。看了H5+得文档后,首先我们得确定把文件存储在那个目录下。文档有四个目录,我选择得是用PUBLIC_DOCUMENTS目录,把文件存放在这个目录下。首先通过:plus.io.requestFileSystem(plus....
目前采用得是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方法来把字符串转换成对象。
更多推荐
所有评论(0)