Save js json data locally

Transfer: https: //www.cnblogs.com/gamedaybyday/p/9906542.html

Use HTML5 to achieve read and write local files   (FileReader read json file, FileSaver.js save json file)

w3school <input> tag  

FileReader WebAPI Interface

FileSaver.js Download

FileSaver.js Introduction

JS create, write, read local files (TXT)    (ActiveXObject this thing can not use, IE10 and Chrome have tried)

HTML 5 file in the File Writer API processing of   (FileSaver and FileWriter are not directly modify save the specified file, can only generate a file, and then save the browser to "download" form)

First, read local JSON file

1. First, using the tag <input> button to create a read

Use json FileReader read the contents of the file 2. json select local file, then reading the results in a String

3. The use of the read result string into json JSON.parse format, then re-use

<div> 
 <INPUT type = "File" ID = "Files" /> 
</ div> 
 
 <Script> 
     var inputElement = document.getElementById ( "Files" ); 
     inputElement.addEventListener ( "Change", handleFiles, to false ); 
     function handleFiles () { 
        var selectedFile = document.getElementById ( "files") files [0];. // Get file object read 
        var name = selectedFile.name; // read the selected file name 
        var size = selectedFile. size; // read size of the selected file 
        console.log ( "file name:" + name + "size:" + size); 
        var Reader = new new FileReader (); // here is the core! ! ! Read operation is completed by its. 
         reader.readAsText (selectedFile); // read the contents of the file  reader.
 console.log ( "read the result:", this.result); // After reading is finished, the callback function, and this time the contents of files stored in the result. Direct operation can be. console.log ( "read result into the JSON:" ); the JSON.parse the let JSON = (the this .Result); the console.log (json.name); the console.log (json.age);};} </ script>

Second, save the JSON file

Use the following code to save JSON

1. The introduction of FileSaver.js file (that you can find the download link from the beginning of the article)

2. Use the <input> tag to create a Save button

2. Click <input> tag when saving, call saveAs method to save the contents of json

1. The introduction of js library

<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 may be used directly or require 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");