使用phonegap file api绕过ios localstorage 5M存储上限

最新推荐文章于 2022-01-19 17:51:21 发布

最新推荐文章于 2022-01-19 17:51:21 发布 · 129 阅读

文章标签：

#phonegap localstorage

移动专栏收录该内容

1 篇文章

订阅专栏

本文探讨了解决PhoneGap应用中localStorage的5M存储限制问题的方法。介绍了使用fileAPI进行数据存储的技术细节，并提供了一段示例代码，展示了如何利用fileAPI进行文件的读写操作。

先介绍下背景：项目是给予ipad的phonegap应用，其中保存很多业务数据，因为最初设计时候使用了local storage，后续便遇到了5M上限的困扰。

解决办法有几个，一个是换成web sql存储，phonegap使用native的sqlite，但要把格式化数据（json）映射到数据库关系表中；一种是用file api，phonegap使用native的file api；但两种方式的编程方式都是回调式的，要改动很多代码。

想实现一种阻塞的数据读取的方式，思路如下：使用file api做write，在write的时候通过传入方法，在local storage中保存write file的绝对路径，读取file不用file api，而使用ajax的阻塞请求。

经过编码测试，可以实现，中间有几个注意的地方：

1. 在file api write的过程中或代码之后（异步未执行完），不要用alert——因为会阻塞掉；

2. phonegap提供的file api是用native重写的，和html5的不完全一样，如LocalFileSystem, filewriter write(String)

贴下代码

var XFile = {
	writeFile: function(fileName, txt, fnCallbackWithPath){
		if(!fileName || !txt)
			return;

		var size = 0;
		var fnReq = window.requestFileSystem || window.webkitRequestFileSystem;
		var type = X.isPhonegap ? window.LocalFileSystem.PERSISTENT : window.TEMPORARY;

		fnReq(type, size, function(fsHandler){
			fsHandler.root.getFile(fileName, {create: true, exclusive: false}, function(entry){
				entry.createWriter(function(writer){
					writer.onerror = function(error) {
						X.log('Web file write exception 1 : ' + error);
					}

					// safari -> write(txt) directly
					if(X.isPhonegap){
						try {
							writer.write(txt);
						}catch(error){
							X.log('Web file write exception 2 : ' + error);
						}
					}else{
						var size = 0;
						writer.onwriteend = function () {
							writer.onwriteend = null;
							writer.truncate(size);
							X.log('Web file write ok : ' + fileName);
						}
						try {
							var blobBulder = new WebKitBlobBuilder();
							blobBulder.append(txt);
							var blob = blobBulder.getBlob();
							size = blob.size;

							writer.write(blobBulder.getBlob());
						}catch(error){
							X.log('Web file write exception 2 : ' + error);
						}
					}
				}, function(error){
					X.log('Web file write exception 3 : ' + error);
				});

				if(fnCallbackWithPath){
					fnCallbackWithPath(entry.toURL());
				}
			}, function(error){
				X.log('Web file write exception caught : ' + error);
			});
		}, function(){
			X.log('Web file api not support!');
		});
	}, 

	deleteFile: function(fileName){
		if(!fileName)
			return;

		var size = 0;
		var fnReq = window.requestFileSystem || window.webkitRequestFileSystem;
		var type = X.isPhonegap ? LocalFileSystem.PERSISTENT : window.TEMPORARY;

		fnReq(type, size, function(fsHandler){
			fsHandler.root.getFile(fileName, null, function(entry){
				if(entry)
					entry.remove();
				X.log('Delete file : ' + entry.toURL());
			}, function(error){
				X.log('Web file delete exception caught : ' + error);
			});
		}, function(){
			X.log('Web file api not support!');
		});
	}, 

	readFile: function(fileName, fn){
		if(!fileName)
			return;

		var size = 0;
		var fnReq = window.requestFileSystem || window.webkitRequestFileSystem;
		var type = X.isPhonegap ? LocalFileSystem.PERSISTENT : window.TEMPORARY;

		fnReq(type, size, function(fsHandler){
			fsHandler.root.getFile(fileName, {create: false}, function(entry){
				if(entry){
					entry.file(function(file){
						var reader = XFile.getFileReader();
						fn(reader.readAsBinaryString(file.webkitSlice()));
					}, function(e){
						X.log('Web file read exception caught : ' + e.code);
					});
				}
			}, function(e){
				X.log('Web file read exception caught : ' + e.code);
			});
		}, function(){
			X.log('Web file api not support!');
		});
	}, 

	getFileReader: function(){
		var reader = new FileReader();
		reader.onabort = this.handler.abort;
		reader.onerror = this.handler.error;
		return reader;
	}, 

	handler: {
		abort: function(event) {
			X.log("this is FileReader's onabort event.");
		},
		error: function(event) {
			X.log("this is FileReader's onerror event.");
		}
	},

	dump: ''
};

有个国人童鞋写了一个html5 file api的封装，很8错，大家也可以使用那个HTML5-FileSystem-Demo-master

请搜索下github