js读写json文件

港控/mmm° 2023-07-09 14:29 96阅读 0赞

### **js读json文件：** ###

<div>
     <input type="file" id="files"/>
    </div>
     
     <script>
         var inputElement = document.getElementById("files");
         inputElement.addEventListener("change", handleFiles, false);
         function handleFiles() {
            var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
            var name = selectedFile.name;//读取选中文件的文件名
            var size = selectedFile.size;//读取选中文件的大小
            console.log("文件名:"+name+"大小："+size);
            var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
             reader.readAsText(selectedFile);//读取文件的内容
     
             reader.onload = function(){
                 console.log("读取结果：", this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
     
                 console.log("读取结果转为JSON：");
                 let json = JSON.parse(this.result);
                 console.log(json.name);
                 console.log(json.age);
             };
     
         }
     </script>

### **js写json文件：** ###

<input type="button" id="export" value="保存"/>
    
    
    <script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.js"></script>
    <script>
     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");
     }
     
    </script>

### [FileSaver.js相关介绍][FileSaver.js] ###

### [FileSaver.js下载地址][FileSaver.js 1] ###

[FileSaver.js]: https://www.cnblogs.com/yunser/p/7629399.html
[FileSaver.js 1]: https://www.bootcdn.cn/FileSaver.js/