로컬로 저장 JS JSON 데이터

전송 : HTTPS : //www.cnblogs.com/gamedaybyday/p/9906542.html

로컬 파일을 읽고 쓸 달성하기 위해 HTML5를 사용하여   (을 FileReader는 FileSaver.js는 JSON 파일을 저장 JSON 파일을 읽기)

w3school <input> 태그  

FileReader를 WebAPI 인터페이스

FileSaver.js 다운로드

FileSaver.js 소개

JS 읽기, 쓰기, 생성 로컬 파일 (TXT)    (이 점은 사용할 수 없습니다 ActiveXObject, IE10과 크롬 시도)

의 파일 라이터 API 처리에 HTML 5 파일   (FileSaver와 FileWriter 있습니다 직접적으로 수정 만 파일을 생성 할 수 있습니다, 지정된 파일을 저장 한 다음 양식 "다운로드"브라우저를 저장)

첫째, 지역 JSON 파일을 읽어

1. 우선, 태그를 이용하여 <input> 버튼 판독을 만들

다음 문자열의 결과를 읽고, 로컬 파일을 선택하고 파일 2. JSON의 내용을 읽을 파일 리더 JSON을 사용하여

3. JSON JSON.parse 형식으로 판독 결과 문자열의 사용 후 재사용

<DIV> 
 <INPUT 유형 = "파일"ID = "파일"/> 
</ DIV> 
 
 <script> 
     var에 inputElement = document.getElementById를 ( "파일" ); 
     (false로 "변경", handleFiles, inputElement.addEventListener ) 
     기능 handleFiles () { 
        VAR selectedFile = document.getElementById를 ( "파일") 파일 [0] // ;. 파일 오브젝트 읽어 오기 
        VAR 이름 = selectedFile.name를 // 선택된 파일 이름 판독 
        VAR 크기 = selectedFile한다. 크기, 선택한 파일의 크기를 읽을 // 
        을 console.log ( "파일 이름 :"+ 이름 + "크기 :"+ 크기); 
        var에 리더 = 새로운 새로운 FileReader를을 (); // 여기에 핵심입니다! ! ! 읽기 작업은 완료됩니다. 
         reader.readAsText (selectedFile는) 파일의 내용을 읽어 //  독자.
 CONSOLE.LOG는 ( "결과 읽기 :"this.result을) 읽기가 완료 콜백 함수,이 시간 // 후 파일의 내용은 결과에 저장됩니다. 직접 작업을 할 수 있습니다. CONSOLE.LOG (이하 "판독 결과에 JSON" ) 상기 JSON.parse 송출 JSON = (이 본 .Result) 상기 CONSOLE.LOG (json.name) 상기 CONSOLE.LOG (json.age);};} </ 스크립트>

둘째, JSON 파일을 저장

JSON을 저장하려면 다음 코드를 사용하여

1. FileSaver.js 파일의 도입 (당신이 문서의 시작 부분에서 다운로드 링크를 찾을 수 있습니다)

2. 저장 버튼을 만들기 위해 <input> 태그를 사용하여

2. <입력> 저장할 때, JSON의 내용을 저장하기 위해 SaveAs 메서드를 호출 태그

1. JS 라이브러리의 도입

<script SRC = " https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js " > </ script> 
<input 타입 = " 버튼 " ID = " 내보내기 " 값 = " 保存" /> 
 
<script> var에 버튼 = document.getElementById를 ( " 수출 " ); 
 button.addEventListener는 ( " 클릭 " , saveHandler 거짓을 ); 
 기능 saveHandler () { 
      데이터하자 = { 
          이름 : "
 88 
      } 
      VAR의 함량 = JSON.stringify (데이터);
      VAR의 블롭 = 새로운 물방울 ([내용] {형식 : " 텍스트 / 플레인; 문자셋 = UTF-8 " }); 
      다른 이름으로 저장 (BLOB, " save.json " ); 
 }
 
 </ SCRIPT>

도 2는 직접 사용되거나 VUE 필요할 수있다

VAR FileSaver는 = (필요 '파일 보호기');

데이터 = {하자 
          이름 : "hanmeimei", 
          연령 : 88 
      } 
= JSON.stringify (데이터) VAR 내용을;

VAR 블롭 = 새로운 물방울 ([ 콘텐츠 ] { 형식 : "텍스트 / 플레인; 문자셋 = UTF-8"});

FileSaver.saveAs (BLOB, "안녕하세요 world.txt");