HTML5 파일 시스템은 강력한 API입니다. 힘에는 복잡성이 수반됩니다. 복잡성이 높아질수록 디버깅의 어려움이 커집니다. 안타깝게도 현재 Chrome DevTools에서는 Filesystem API를 지원하지 않습니다. 이로 인해 디버깅이 예상보다 더 어려워집니다. 파일 시스템에서 파일을 나열/삭제하는 코드를 작성해야 한다는 의미입니다.
Filesystem API와 관련된 작업을 진행하면서 도움이 될 만한 몇 가지 팁을 얻었습니다. 각 팁마다 고유한 제한사항이 있지만 두 가지를 조합하여 사용하면 90% 의 효과를 얻을 수 있습니다. 상위 5개는 다음과 같습니다.
file://에서 실행되고 있지 않은지 확인합니다. 많은 사람이 알아챌 수 있는 교묘한 문제입니다. Chrome은file://에 주요 보안 제한사항을 적용합니다. 대부분의 고급 파일 API (BlobBuilder,FileReader, Filesystem API 등)는file://에서 로컬로 앱을 실행하면 오류를 발생시키거나 자동으로 실패합니다. 웹 서버가 준비되지 않은 경우--allow-file-access-from-files플래그로 Chrome을 시작하여 이러한 보안 제한을 우회할 수 있습니다. 테스트 목적으로만 이 플래그를 사용하세요.두려운
SECURITY_ERR또는QUOTA_EXCEEDED_ERR. 이 문제는 일반적으로 데이터 쓰기를 시도하지만 #1의 영향을 받고 있을 때 발생합니다. 그렇지 않은 경우 할당량이 없는 것일 수 있습니다. 파일 시스템을 열 수 있는 할당량에는TEMPORARY또는PERSISTENT의 두 가지 유형이 있습니다. 후자를 사용하는 경우 사용자가 앱에 영구 저장소를 명시적으로 부여해야 합니다. 이 방법은 이 게시물을 참고하세요.filesystem:URL FTW. 앱 출처의 루트DirectoryEntry에 대한filesystem:URL을 열면 편리합니다. 이게 무슨 의미일까요? 예를 들어 앱이www.example.com에 게시되어 있다면 새 탭에서filesystem:http://www.example.com/temporary/를 엽니다. Chrome에 앱 출처에 저장된 파일/폴더의 읽기 전용 목록이 표시됩니다.filesystem:URL에 관한 자세한 내용은 https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls를 참고하세요.chrome://settings/cookies님은 친구입니다. 이 페이지에서는 출처에 저장된 데이터를 핵으로 공격할 수 있습니다. 여기에는 데이터베이스 스토리지, AppCache, 쿠키, localStorage, FileSystem API의 항목이 포함됩니다. 전부 아니면 전무라는 점을 미리 기억하세요. 하나의 파일 또는 데이터만 삭제할 수는 없습니다.오류 콜백에 유의하세요. Filesystem API는 비동기 환경에 있습니다 (Workers에서 동기화 버전을 사용하지 않는 경우). API 호출에 항상 오류 콜백을 사용합니다. 이것은 선택 사항이지만 나중에 상황이 폭발하면 슬픔을 크게 덜어줄 것입니다.