JavaScript를 사용하여 파일을 저장하는 방법

JavaScript는 브라우저를 통해 사용자와 상호 작용하기 위해 웹 개발에 널리 사용되는 프로그래밍 언어입니다. 많은 웹 애플리케이션에서 사용자는 향후 세션에서 다시 사용할 수 있도록 일부 데이터를 로컬 컴퓨터에 저장해야 합니다. JavaScript는 파일 저장이라는 메커니즘을 사용하여 이를 수행합니다. 이 기사에서는 JavaScript를 사용하여 로컬 컴퓨터에 파일을 저장하는 방법을 알아봅니다.

개요

파일을 저장한다는 것은 로컬 컴퓨터의 하드 드라이브에 데이터를 저장하는 것을 의미합니다. 이는 JavaScript의 파일 저장 메커니즘을 사용하여 달성할 수 있습니다. 사용자가 저장 버튼을 클릭하면 사용자 입력이나 애플리케이션의 데이터가 포함된 새 파일이 로컬 컴퓨터에 생성됩니다. 비디오 플레이어, 문서 편집기, 이미지 편집기 등과 같은 웹 애플리케이션에서 일반적으로 사용되어 사용자가 편집된 파일을 다운로드하고 저장할 수 있습니다.

FileSaver.js 라이브러리를 사용하여 파일 저장

FileSaver.js는 파일을 저장하는 데 사용할 수 있는 인기 있는 타사 JavaScript 라이브러리입니다. JavaScript의 Blob 개체를 사용하여 데이터가 포함된 파일을 만들고 window.location 개체의 href 속성을 수정하여 이를 사용자의 로컬 컴퓨터에 저장합니다.

FileSaver.js 라이브러리를 사용하려면 다음 두 단계를 수행해야 합니다.

1단계 - 라이브러리 가져오기

다음 코드는 JavaScript 파일을 사용하여 FileSaver.js 라이브러리를 가져오는 방법을 보여줍니다.

<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>

2단계 - 라이브러리() 함수에서 saveAs를 사용하여 파일 저장

다음 코드는 saveAs() 함수를 사용하여 파일을 저장하는 방법을 보여줍니다.

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  saveAs(file, filename);
}

이 예에서는 "hello.txt라는 파일을 만듭니다. "라고 적힌 문자열 "Hello, World!"를 변경합니다. 그런 다음 saveAs() 함수를 사용하여 Blob 개체와 파일 이름을 전달합니다. 파일 저장 과정에서 사용자는 저장할 파일의 위치와 파일 이름을 지정하라는 파일 저장 대화 상자를 보게 됩니다.

FileReader 및 Blob 개체를 사용하여 파일 저장

FileReader 및 Blob 개체는 기본 JavaScript API입니다. Blob 개체는 이진 데이터를 나타내며 데이터가 포함된 파일을 만드는 데 사용할 수 있습니다. FileReader는 파일을 읽고 문자열 변수를 반환한 다음 사용자의 로컬 컴퓨터에 쓸 수 있습니다.

1단계 - Blob 객체 생성 및 저장

다음 코드는 Blob 객체를 생성하고 로컬 파일에 저장하는 방법을 보여줍니다.

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});
  var a = document.createElement('a');
  a.href = window.URL.createObjectURL(file);
  a.download = filename;
  a.click();
}

여기서 "hello.txt"라는 파일을 생성하고 쓰기를 수행했습니다. "Hello, World!"라는 문자열을 입력합니다. window.URL.createObjectURL() 메소드를 사용하여 Blob 객체를 포함하는 URL을 생성합니다. 그런 다음 링크를 만들고 파일을 다운로드했습니다.

2단계 - 파일에 데이터 쓰기

다음 코드는 FileReader에 입력 데이터를 쓰는 방법을 보여줍니다.

function saveFile() {
  var data = "Hello, World!";
  var filename = "hello.txt";
  var file = new Blob([data], {type: 'text/plain'});

  var reader = new FileReader();
  reader.onload = function(event) {
    var text = event.target.result;
    var a = document.createElement('a');
    a.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(text);
    a.download = filename;
    a.click();
  };
  reader.readAsText(file);
}

여기에서는 "hello.txt"라는 파일을 만들고 "Hello, World writing!"이라는 문자열을 추가합니다. 그것. FileReader 인스턴스 readAsText() 메서드를 사용하여 파일에서 텍스트를 읽고 성공 시 해당 텍스트를 반환합니다. 이 텍스트를 사용하여 새 링크를 만들고 파일을 다운로드합니다.

결론

이 기사에서는 JavaScript를 통해 로컬 컴퓨터에 파일을 저장하는 방법에 대해 논의했습니다. JavaScript 파일 저장 메커니즘은 비디오 플레이어, 문서 편집기, 이미지 편집기 등과 같은 많은 웹 응용 프로그램에서 사용할 수 있습니다. FileSaver.js 라이브러리와 기본 JavaScript API를 사용하여 두 가지 다른 구현을 시연했습니다. 이러한 구현은 사용하기 쉽고 웹 애플리케이션에 대한 더 나은 사용자 경험을 제공합니다.

위 내용은 JavaScript를 사용하여 파일을 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!