????????開發期間可能會遇到需要讀取的JSON以文件形式儲存在本地的情況

當用戶可以手動選擇文件時：

????????這個情況就很常見也很好解決了，我們可以使用類型為file的input標簽。

假設我們有一個ID為“fileInput”、類型為“file”的input標簽。

<input type="file" id="fileInput" />

????????那么JS代碼就可以這樣寫：

首先，獲取到頁面中input標簽的DOM元素

let inputDOM = document.getElementById("fileInput");

然后獲取這個DOM元素中用戶所上傳文件的文本內容

let fileText = inputDOM.files[0];

接著，新建一個FileReader對象

let reader = new FileReader();

將剛剛獲取到的文件內容放入新建的reader，并指定文件所使用的編碼方式

reader.readAsText(fileText,"UTF-8");

? ?注意，FileReader是一個異步運行的API???

在reader工作完成后，運行一些代碼，將讀取到的內容“丟”出來

reader.onload = function(){//這里的代碼將在FileReader完成工作之后運行 }

????????這個匿名函數內可以這樣寫：

????????????????獲取FileReader讀取的結果

let content = reader.result; //這里也可以簡寫FileReader的名字為“this” let content = this.result;

????????????????用JSON.parse把結果轉換為JSON對象

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

????????????????把提取到的JSON對象賦值給在合適位置聲明過的函數

SmoeVariable = JSONobject

當文件固定儲存在某目錄時：

這種情況不多見，但確實是更快速解決某些問題的奇怪方法。

? ?由于瀏覽器安全策略，正常途徑無法指定目錄讀取本地文件? ?

但可以取個巧，對JSON文件做一點小改動，就能把JSON作為JS文件引入網頁了。

//原本的JSON： {"a": "AA","b": 22.22,"c": true,"d": ["d1",2,false,{null}] }//簡單改動一下： data = {"a": "AA","b": 22.22,"c": true,"d": ["d1",2,false,{null}] }

添加等號和前方的變量名之后，JSON就變成了JS代碼，隱式聲明了一個變量，并將整段JSON作為對象賦值給它。

“data”可以按需定義，只要將這個文件使用script標簽引入文檔即可。

Tips：這樣的文件可以使用innerHTML或者creatElement動態引入

總結

以上是生活随笔為你收集整理的JS原生读取 本地 JSON的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。