js json数据保存到本地

使用HTML5读写本地文件（读取json文件，.js保存json文件）

标签

界面

.js下载地址

.js介绍

JS创建、写入、读取本地文件（txt）（这个东西根本不行，IE10都试过了）

HTML 5中用于文件处理的File API（并且两者都不能直接修改保存指定文件，只能生成一个文件，然后浏览器以“下载”的形式保存）

1.读取本地JSON文件

1.首先使用标签创建阅读按钮

2、然后选择本地的json文件，用它来读取json文件的内容。 此时读取的结果是一个字符串

3.使用JSON.parse将读取结果字符串转换为json格式，然后使用

 

 
 cript>
     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);
         };
 
     }
 cript>

2. JSON文件的保存

使用以下代码进行JSON保存

1.导入.js文件（可以在文章开头找到下载链接）

2. 创建一个带有标签的保存按钮

2、点击标签保存时，调用保存json内容的方法

1.导入js库

cript src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js">cript>
"button" id="export" value="保存"/>
 
cript>
 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");
 }
 
cript>

2.或者直接在vue中使用

var FileSaver = require(\'file-saver\'); 

 let data = {
          name:"hanmeimei",
          age:88
      }
var content = JSON.stringify(data);

var blob = new Blob([content ], {type: "text/plain;charset=utf-8"}); 

FileSaver.saveAs(blob, "hello world.txt");