HTML5 FileSystem API_html5 튜토리얼 기술 사용 소개

HTML5의 장점 중 하나는 웹 프로그램이 데이터 저장은 물론 파일 작업까지 수행할 수 있는 임시 또는 영구 공간(할당량)을 적용할 수 있다는 것입니다.

파일 시스템은 폴더 및 파일 생성, 이동, 삭제 등의 작업을 제공하여 데이터의 로컬 처리를 크게 촉진합니다. 또한 모든 데이터는 샌드박스에 있으며 서로 다른 웹 프로그램이 서로 액세스할 수 없습니다. 데이터 무결성 및 보안.

CatWrite 프로젝트에서는 HTML5의 이 기능을 사용하여 데이터를 저장하는데 매우 편리합니다. 하지만 현재는 Chrome 브라우저에서만 FileSystem API를 더 잘 지원하므로 Chrome 브라우저에서만 실행할 수 있습니다.

이 기능을 완성할 때 많은 정보를 참고했는데, 일부 정보는 1년 전 내용이지만, 브라우저 버전이 변경되면서 일부 코드가 낡아졌기 때문에 여기서 하나씩 정리하겠습니다. 여기에는 프로젝트에 사용된 API만 나열되어 있으며, 완성된 기능을 요약한 것입니다.

공간 신청
데이터를 저장하려면 브라우저에 신청해야 합니다. 영구 저장일 경우 사용자에게 묻고, 동의한 후에만 실행이 진행됩니다.

먼저 원하는 권한을 선언해야 합니다.

코드 복사

코드는 다음과 같습니다.

window.requestFileSystem = window. requestFileSystem || window.webkitRequestFileSystem; //파일 시스템 요청 식별
window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL

시스템 권한을 얻은 후 브라우저에서 공간을 신청할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

window.requestFileSystem(window.PERSISTENT, //영구(영구) 또는 임시(임시)
1024*1024, //1M
onInitFs, //성공 후 콜백 함수
errorHandler); //오류 발생 후 콜백 함수

코드 복사

코드는 다음과 같습니다:

function onInitFs(fs){

fs.root.getDirectory('catwrite_documents', {create: true}, function(dirEntry) {

console .log('방금 'dirEntry.name' 디렉터리를 생성했습니다.');
}, errorHandler)
}
//Error callback
function errorHandler(err){
var msg = '오류가 발생했습니다: ';
switch (err.code) {
case FileError.NOT_FOUND_ERR:
msg = '파일 또는 디렉터리를 찾을 수 없습니다.'
break; FileError.NOT_READABLE_ERR:
msg = '파일 또는 디렉토리를 읽을 수 없음';
break;
case FileError.PATH_EXISTS_ERR:
msg = '파일 또는 디렉토리가 이미 존재합니다.'; > case FileError.TYPE_MISMATCH_ERR:
msg = '잘못된 파일 형식';
기본값:
msg = '알 수 없는 오류';

console .log(msg err);
}


성공하면 OnInitFs 콜백 함수를 호출한 것을 후회하게 되며 getDirectory 메소드를 사용하여 폴더를 생성합니다. 이에 대해서는 아래에서 설명합니다.

하지만 이렇게 하면 페이지가 로드될 때마다 적용된다는 문제가 있습니다. 이는 확실히 우리가 원하는 것은 데이터가 있을 때 데이터를 읽을 수 있게 하는 것입니다.


공간이 적용되었는지 확인

그래서 브라우저의 데이터를 읽어서 저장되었는지 확인해야 합니다. 이는 다른 API를 사용합니다.

코드 복사

코드는 다음과 같습니다.

void queryUsageAndQuota( DOMString url의 , EntryCallback의 , 선택적인 ErrorCallback의 errorCallback )

이 API는 현재 웹의 공간 상태를 쿼리할 수 있습니다. 성공하면 SuccessCallback 콜백 함수가 호출되고 사용된 공간과 총 공간이 매개변수로 메소드에 전달됩니다. 실패하면 errorCallback이 호출됩니다.





코드 복사

코드는 다음과 같습니다.

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT,
함수(사용됨, 남음){
if(remaining == ""){
console.log("공간이 적용되지 않았습니다. ");
}else{
console.log("사용된 공간" 사용됨);
console.log("모든 공간" 남음);
}
},
errorHandler )

신청 공간이 있는지 여부는 잔여 매개변수를 통해 판단할 수 있습니다. 신청이 없는 경우 이전 단계로 돌아가 신청을 하시면 됩니다. 이미 공간이 있는 경우 공간과 파일을 확보해야 데이터를 조작할 수 있습니다.

파일 항목 가져오기
파일 시스템은 특수한 파일 시스템과 샌드박스 모드를 사용합니다. 샌드박스에 있는 파일은 컴퓨터나 다른 웹에서 접근할 수 없습니다.

브라우저에 입력하세요:

?파일 시스템:http://catcoder.com/pertant/
　

이런 방법으로 이 컴퓨터에서 catcoder.com 웹사이트의 영구 데이터에 액세스할 수 있습니다. 임시 공간을 읽으려면 영구 데이터를 임시 데이터로 바꾸세요.

그런 다음 URL과 해당 API를 통해 파일 항목을 가져올 수 있습니다(로컬 URL을 사용하여 파일이나 디렉터리 항목을 조회할 수 있음).

코드 복사

코드는 다음과 같습니다.

voidsolveLocalFileSystemURL(
DOMString url, EntryCallback의
, 선택적 ErrorCallback의
errorCallback
)

아래 머신에 저장된 데이터를 읽을 수 있습니다

코드 복사

코드는 다음과 같습니다.

var url = "filesystem:http: //" window.location.host "/pertant/catwrite_documents/";
window.resolveLocalFileSystemURL(url,function(fileEntry){
console.log(fileEntry);
var dirReader = fileEntry.createReader( );
var readEntries = function(){
dirReader.readEntries(function(results){
if(!results.length){
create_file_title("기본 파일", "");
console.log ("파일 없음!");
}else{
console.log("Read results.length "files");
for(var i = 0; i console.log(results[i].name);
getFileContentByName(fileEntry, results[i].name)
}
}
} )
};
readEntries()
},errorHandler);