參考：

使用HTML5來實(shí)現(xiàn)本地文件讀取和寫入? (FileReader讀取json文件，FileSaver.js保存json文件)

JS創(chuàng)建、寫入、讀取本地文件(txt)? ?(ActiveXObject 這玩意根本不能用，IE10 和 Chrome都試了)

HTML 5中的文件處理之File Writer API? (FileSaver和FileWriter都是不能直接修改保存指定文件的，只能生成一個(gè)文件，然后瀏覽器以"下載"的形式保存)

想用Egret來做地圖編輯器來著，需要打開地圖配置，編輯地圖后，再保存地圖配置。

所以去網(wǎng)上搜了一圈json的讀取和保存方法。

一、讀取本地JSON文件

1. 首先使用標(biāo)簽創(chuàng)建一個(gè)讀取的按鈕

2. 然后選擇本地的json文件后使用FileReader讀取json文件的內(nèi)容，此時(shí)讀取的結(jié)果是字符串

3. 將讀取的結(jié)果字符串使用JSON.parse轉(zhuǎn)為json格式，之后再使用

var inputElement = document.getElementById("files");

inputElement.addEventListener("change", handleFiles, false);

function handleFiles() {

var selectedFile = document.getElementById("files").files[0];//獲取讀取的File對(duì)象

var name = selectedFile.name;//讀取選中文件的文件名

var size = selectedFile.size;//讀取選中文件的大小

console.log("文件名:"+name+"大小："+size);

var reader = new FileReader();//這里是核心！！！讀取操作就是由它完成的。

reader.readAsText(selectedFile);//讀取文件的內(nèi)容

reader.onload = function(){

console.log("讀取結(jié)果：", this.result);//當(dāng)讀取完成之后會(huì)回調(diào)這個(gè)函數(shù)，然后此時(shí)文件的內(nèi)容存儲(chǔ)到了result中。直接操作即可。

console.log("讀取結(jié)果轉(zhuǎn)為JSON：");

let json = JSON.parse(this.result);

console.log(json.name);

console.log(json.age);

};

}

實(shí)際操作步驟

使用標(biāo)簽創(chuàng)建的按鈕如下圖

點(diǎn)擊“選擇文件”，打開本地test.json文件，test.json內(nèi)容如下圖：

讀取后console.log輸出結(jié)果如下：

二、JSON文件的保存

網(wǎng)上搜了一圈，有個(gè)new ActiveXObject("Scripting.FileSystemObject");方法，但是沒有什么用。

使用下面的代碼進(jìn)行JSON保存

1. 引入FileSaver.js文件 (可以從文章開頭那去找下載鏈接)

2. 使用標(biāo)簽創(chuàng)建一個(gè)保存按鈕

2. 點(diǎn)擊標(biāo)簽保存時(shí)，調(diào)用saveAs方法保存json內(nèi)容

var button = document.getElementById("export");

button.addEventListener("click", saveHandler, false);

function saveHandler(){

let data = {

name:"hanmeimei",

age:88

}

var content = JSON.stringify(data);

var blob = new Blob([content], {type: "text/plain;charset=utf-8"});

saveAs(blob, "save.json");

}

實(shí)際操作步驟

標(biāo)簽創(chuàng)建保存按鈕

瀏覽器提示下載save.json文件

下載保存后的文件

三、疑問

1. 為什么保存的時(shí)候不能直接保存打開的json文件，還需要"下載"這一步。

我沒有去深究，估摸著這是安全權(quán)限問題，因?yàn)槿绻麨g覽器能任意修改你電腦上的文件，那是比較可怕的。

2. 在Egret中如何使用

首先這些input標(biāo)簽必須創(chuàng)建在egret的div之前

然后這些標(biāo)簽必須得隱藏起來，不然會(huì)蓋在游戲canvas只上，很難控制顯示和隱藏

因?yàn)闃?biāo)簽按鈕被隱藏了你沒法點(diǎn)，在Egret里用代碼控制主動(dòng)調(diào)用click事件，來觸發(fā)打開文件和保存的操作，這樣比較靈活。

//打開本地文件

private onOpenFile(){

var files= document.getElementById("files");

files.onchange = this.onChang;

files.click();

}

//選定本地文件

private onChang(){

//獲取打開的文件，并進(jìn)行操作

var files: any = document.getElementById("files");

var file = files.files[0];

}

總結(jié)

以上是生活随笔為你收集整理的html5 写json 文件,HTML5实现本地JSON文件的读写的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。