Javascript는 저장 폴더를 구현합니다.

최근 클라우드 스토리지의 인기로 인해 폴더 관리는 많은 사람들에게 무시되었습니다. 그러나 오프라인 파일을 자주 사용해야 하는 일부 사람들에게는 로컬 저장 폴더의 필요성이 여전히 필수입니다. 이 기사에서는 JavaScript를 사용하여 폴더 저장 기능을 구현하는 방법을 소개합니다.

1. 단일 파일 저장

JavaScript에서 파일을 저장하는 방법은 html5에서 a 태그 및 다운로드 속성을 사용할 수 있습니다. 코드 예:

var blob = new Blob([content]);  // content为需要保存的文本内容

var fileName = 'example.txt';

var a = document.createElement('a');

a.download = fileName;

a.href = URL.createObjectURL(blob);

a.click();

위에 표시된 대로 먼저 Blob 개체와 파일의 파일 이름을 만든 다음 태그를 만들고 다운로드 속성을 파일 이름으로 설정하고 href 속성을 Blob 개체의 URL 주소로 설정합니다. , 태그 클릭을 트리거하는 이벤트이면 충분합니다.

2. 폴더 저장

그러나 여러 파일을 저장해야 할 때 위의 방법만으로는 더 이상 요구 사항을 충족할 수 없습니다. 여러 파일을 하나의 폴더에 패키징하는 것을 고려해야 합니다. 이런 상황에서는 JSZip 라이브러리를 사용할 수 있습니다.

JSZip은 브라우저 측 및 기타 관련 작업에서 zip 압축 파일을 생성하고 읽고 압축을 풀 수 있는 오픈 소스 JavaScript 라이브러리입니다. 다음은 폴더 저장을 위한 코드 예제입니다.

var zip = new JSZip();

zip.file("example1.txt", "content1");  // 将需要保存的文本内容添加到zip实例中
zip.file("example2.png", "content2");

zip.generateAsync({type:"blob"})  // 将zip打包成blob对象
.then(function(content) {
    saveAs(content, "example.zip");  // 调用FileSaver库将blob保存到本地
});

위에 표시된 대로 먼저 JSZip 라이브러리를 인스턴스화한 다음 zip.file()方法将需要保存的文件添加到zip实例中；最后利用zip.generateAsync() 메서드를 사용하여 zip 인스턴스에서 blob 개체를 생성합니다. 이 메소드는 Promise 객체를 반환하며 then 메소드를 통해 연결되어야 합니다. 마지막으로 FileSaver 라이브러리를 사용하여 Blob 개체를 로컬에 저장하여 폴더를 저장할 수 있습니다.

3. 호환성 문제

위 방법의 호환성은 브라우저마다 다르므로 조정이 필요하다는 점에 유의해야 합니다.

FileSaver 라이브러리의 경우 Apple Safari 등 WebKit 커널을 사용해야 하는 모든 브라우저에서 호환되지 않으며 파일 이름을 ASCII 인코딩으로 변환해야 합니다. 샘플 코드는 다음과 같습니다.

function onExportClick(){
    var text     = fileText
    var filename = 'test.txt'.replace(/[^a-zd_]/gi,'_').toLowerCase();
    var blob = new Blob([text], {type: 'text/plain'});
    if(window.navigator.msSaveOrOpenBlob){
        window.navigator.msSaveBlob(blob, filename);
    }else{
        var a = document.createElement('a');
        var url = URL.createObjectURL(blob);

        if(a.download != undefined){
            a.href     = url;
            a.download = filename;
            a.click();
        }else{
            window.location.href = url;
        }

        URL.revokeObjectURL(url);
    }
}

JSZip 라이브러리의 경우 파일의 유형과 인코딩을 고려해야 합니다. 파일 유형이 다르면 다른 인코딩을 사용해야 합니다. 또한 일부 브라우저에서는 추가 파일이나 폴더를 추가할 수 있다는 점에 유의하세요.

많은 브라우저 호환성 문제로 인해 이러한 라이브러리를 사용할 때 특히 파일 이름 및 파일 형식과 같은 문제를 고려해야 하는 상황이 많습니다.

요약:
이 글에서는 JavaScript를 사용하여 폴더 저장 기능을 구현하는 방법을 소개합니다. 구현 과정에서 JSZip 라이브러리와 FileSaver 라이브러리를 사용해야 합니다. 브라우저 호환성 문제로 인해 서로 다른 브라우저 간의 적응에 주의를 기울여야 합니다.

위 내용은 Javascript는 저장 폴더를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!