开发期间可能会遇到需要读取的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动态引入