js读写json文件

最新推荐文章于 2025-04-17 08:25:53 发布

mini_qiu

最新推荐文章于 2025-04-17 08:25:53 发布

阅读量1.3w

点赞数 4

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/mini_1251861209/article/details/104571242

版权

前端专栏收录该内容

44 篇文章

订阅专栏

本文详细介绍使用JavaScript读取和写入JSON文件的方法。通过示例代码，展示如何利用FileReader API读取本地JSON文件，并使用FileSaver.js插件将JSON数据保存为文件。涵盖读取文件内容、解析JSON数据及创建、保存JSON文件的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="保存"/>

<!-- 关键是要引入这个js插件 -->
<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>