자바스크립트에서 JSON 데이터를 파일로 저장하는 방법

15 Sep 2023

javascript

JSON 데이터 생성하기 JSON 데이터를 생성하기 위해서는 자바스크립트 객체를 JSON 문자열로 변환해야 합니다. 예를 들어, 다음과 같은 객체를 JSON 문자열로 변환해보겠습니다.

const data = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const jsonData = JSON.stringify(data);

파일 다운로드 링크 생성하기 자바스크립트에서 파일을 다운로드하려면 새로운 링크를 생성하고 해당 링크에 파일을 연결해야 합니다. 다음과 같은 코드로 파일 다운로드 링크를 생성할 수 있습니다.

const downloadLink = document.createElement("a");
downloadLink.href = "data:application/json;base64," + btoa(jsonData);
downloadLink.download = "data.json";

링크 클릭 시 파일 다운로드하기 생성한 다운로드 링크를 클릭하면 파일이 다운로드됩니다. 페이지에 링크를 추가하고 이를 클릭하는 동작을 추가해주세요.

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

전체 코드 예시

const data = {
  name: "John Doe",
  age: 30,
  email: "johndoe@example.com"
};

const jsonData = JSON.stringify(data);

const downloadLink = document.createElement("a");
downloadLink.href = "data:application/json;base64," + btoa(jsonData);
downloadLink.download = "data.json";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);

위의 코드를 실행하면 JSON 데이터가 포함된 파일이 다운로드됩니다. 파일 이름은 “data.json”으로 설정되었고, 다운로드되는 파일은 Base64 인코딩된 JSON 문자열입니다.

이 방법을 통해 자바스크립트에서 JSON 데이터를 파일로 저장할 수 있습니다. 파일로 저장된 JSON 데이터를 읽어오는 방법에 관심이 있다면, 추가적인 정보를 찾아 보시는 것이 좋습니다.

#JavaScript #JSON #파일저장