用js實現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方法來把字符串轉換成對象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章