js json數據保存到本地

轉自：https://www.cnblogs.com/gamedaybyday/p/9906542.html

使用HTML5來實現本地文件讀取和寫入  （FileReader讀取json文件，FileSaver.js保存json文件）

w3school <input>標簽  

FileReader WebAPI接口

FileSaver.js下載地址

FileSaver.js介紹

JS創建、寫入、讀取本地文件（txt）   （ActiveXObject 這玩意根本不能用，IE10 和 Chrome都試了）

HTML 5中的文件處理之File Writer API  （FileSaver和FileWriter都是不能直接修改保存指定文件的，只能生成一個文件，然后瀏覽器以"下載"的形式保存）

一、讀取本地JSON文件

1. 首先使用標簽<input>創建一個讀取的按鈕

2. 然后選擇本地的json文件后使用FileReader讀取json文件的內容，此時讀取的結果是字符串

3. 將讀取的結果字符串使用JSON.parse轉為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>

二、JSON文件的保存

使用下面的代碼進行JSON保存

1. 引入FileSaver.js文件 (可以從文章開頭那去找下載鏈接)

2. 使用<input>標簽創建一個保存按鈕

2. 點擊<input>標簽保存時，調用saveAs方法保存json內容

1.引入js庫

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

2.或者vue中可以直接使用require

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");