在現代網頁開發中，H5 (HTML5) 被廣泛使用。它有豐富的 API 和功能，使得開發人員可以完成各種任務。其中之一就是處理 JSON 文件。

JSON（JavaScript Object Notation）是一種常用的數據格式，而且它易于理解和解析。H5 提供了一些內置的 API 來讀取和寫入 JSON 文件。

讀取 JSON 文件

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "jsonfile.json", true);
xmlhttp.send();

上面的代碼讀取了名為 "jsonfile.json" 的 JSON 文件。首先，創建一個 XMLHttpRequest 對象并指定它的回調函數。當狀態改變時，檢查 readyState 和 status 。如果兩者都為 4 和 200，則表示成功地獲取了文件。

接下來，解析獲取到的 JSON 并存儲在 myObj 變量中。最后，將 myObj 的 name 屬性的值插入 id 為 demo 的元素中。

寫入 JSON 文件

var myObj = { name: "John", age: 31, city: "New York" };
var myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

上面的代碼創建了一個包含三個屬性的 JavaScript 對象 myObj。然后，使用 JSON.stringify() 將 myObj 轉換為 JSON 字符串。最后，以 key-value 對的形式將 JSON 字符串保存在本地存儲中。

總結

H5 提供了豐富的 API，可以幫助開發人員讀寫 JSON 文件。對于閱讀 JSON 文件，可以使用 XMLHttpRequest 對象和 JSON.parse() 方法。對于寫入 JSON 文件，則可以使用 JSON.stringify() 方法和本地存儲。