웹 애플리케이션이 파일과 디렉터리를 읽고 쓸 수 있다면 매우 편리할 것이라는 생각을 자주 합니다. 오프라인에서 온라인으로 전환한 후 애플리케이션은 더욱 복잡해졌고, 파일 시스템에 API가 부족하여 네트워크의 발전을 방해해 왔습니다. 바이너리 데이터를 저장하거나 상호 작용하는 것이 데스크톱에만 국한되어서는 안 됩니다. 다행히 FileSystemAPI의 등장으로 이런 상황이 드디어 바뀌었습니다. FileSystemAPI를 사용하면 웹 애플리케이션에서 사용자 로컬 파일 시스템의 샌드박스 부분을 생성하고 읽고 탐색하고 쓸 수 있습니다.
API 는 다양한 주제로 구분됩니다:
파일 읽기 및 처리: File/Blob, FileList, FileReader
작성 및 작성: BlobBuilder, FileWriter
디렉터리 및 파일 시스템 액세스: DirectoryReader, FileEntry/DirectoryEntry, LocalFileSystem
이 글을 쓰는 시점에는 GoogleChrome 브라우저만 FileSystemAPI를 구현할 수 있습니다. 현재 / 파일 할당량 관리를 위한 전용 브라우저 사용자 인터페이스는 없습니다. 사용자 시스템에 데이터를 저장하려면 앱에서 할당량을 요청해야 할 수도 있습니다. 그러나 --unlimited-quota-for-files 태그를 사용하여 Chrome 브라우저를 실행하여 테스트할 수 있습니다. 또한 Chrome 웹 스토어용 앱이나 확장 프로그램을 개발하는 경우 할당량을 요청하지 않고 unlimitedStorage 매니페스트 파일 권한을 사용할 수 있습니다. 마지막으로 사용자는 앱에 저장소를 부여, 거부 또는 추가할 수 있는 권한 대화 상자를 받습니다.
file://을 통해 앱을 디버그하려면 --allow-file-access-from-files 태그가 필요할 수 있습니다. 이러한 태그를 사용하지 않으면 SECURITY_ERR 또는 QUOTA_EXCEEDED_ERRFileError가 발생합니다.
웹 애플리케이션은 window.requestFileSystem()을 호출하여 샌드박스 파일 시스템에 대한 액세스를 요청할 수 있습니다.
// Note: The file system has been prefixed as of Google Chrome 12: window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(type, size, successCallback, opt_errorCallback)
type
파일 여부 스토리지는 내구성이 있어야 합니다. 가능한 값에는 window.TEMPORARY 및 window.PERSISTENT가 포함됩니다. TEMPORARY를 통해 저장된 데이터는 브라우저의 재량에 따라 삭제될 수 있습니다(예: 더 많은 공간이 필요한 경우). PERSISTENT 저장소를 지우려면 사용자 또는 앱의 명시적인 승인이 필요하며 사용자가 앱에 할당량을 부여해야 합니다. 할당량 요청을 참조하세요.
크기
앱이 저장하는 데 필요한 크기(바이트)입니다.
successCallback
파일 시스템 요청이 성공하면 호출되는 콜백입니다. 해당 매개변수는 FileSystem 개체입니다.
opt_errorCallback
오류를 처리하거나 파일 시스템 획득 요청이 거부될 때 사용되는 선택적 콜백입니다. 해당 매개변수는 FileError 객체입니다.
requestFileSystem()을 처음으로 호출하면 시스템이 애플리케이션을 위한 새 저장소를 생성합니다. 이는 샌드박스 파일 시스템이므로 하나의 웹 앱이 다른 앱의 파일에 액세스할 수 없음을 의미합니다. 이는 또한 사용자 하드 드라이브의 임의 폴더(예: 내 그림, 내 문서 등)에 있는 파일을 읽거나 쓸 수 없음을 의미합니다.
사용 예:
function onInitFs(fs) {
console.log('Opened file system: ' + fs.name);}
window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);FileSystem 이 사양은 WebWorkers용으로 계획된 동기화 API(LocalFileSystemSync) 인터페이스도 정의합니다. 그러나 이 튜토리얼에서는 동기화 API를 다루지 않습니다.
이 문서의 나머지 부분에서는 비동기 호출로 인해 발생한 오류에 대해 동일한 처리기를 사용합니다.
function errorHandler(e) {
var msg = '';
switch (e.code) {
case FileError.QUOTA_EXCEEDED_ERR:
msg = 'QUOTA_EXCEEDED_ERR';
break;
case FileError.NOT_FOUND_ERR:
msg = 'NOT_FOUND_ERR';
break;
case FileError.SECURITY_ERR:
msg = 'SECURITY_ERR';
break;
case FileError.INVALID_MODIFICATION_ERR:
msg = 'INVALID_MODIFICATION_ERR';
break;
case FileError.INVALID_STATE_ERR:
msg = 'INVALID_STATE_ERR';
break;
default:
msg = 'Unknown Error';
break;
};
console.log('Error: ' + msg);
}解的讯息。请求存储配额要使用 PERSISTENT 存储，您必须向用户取得存储持久数据的许可。由于浏览器可自行决定删除临时存储的数据，因此这一限制不适用于 TEMPORARY 存储。为了将 PERSISTENT 存储与 FileSystem API 配合使用，Chrome 浏览器使用基于 window.webkitStorageInfo 的新 API 以请求存储：
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) {
window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);
}, function(e) {
console.log('Error', e);
});用户授予许可后，就不必再调用 requestQuota() 了。后续调用为无操作指令。您还可以使用 API 查询源的当前配额使用情况和分配情况：window.webkitStorageInfo.queryUsageAndQuota()使用文件沙盒环境中的文件通过 FileEntry 接口表示。FileEntry 包含标准文件系统中会有的属性类型（name、isFile...）和方法（remove、moveTo、copyTo...）。FileEntry 的属性和方法：
fileEntry.isFile === true fileEntry.isDirectory === false fileEntry.name fileEntry.fullPath ... fileEntry.getMetadata(successCallback, opt_errorCallback); fileEntry.remove(successCallback, opt_errorCallback); fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.getParent(successCallback, opt_errorCallback); fileEntry.toURL(opt_mimeType); fileEntry.file(successCallback, opt_errorCallback); fileEntry.createWriter(successCallback, opt_errorCallback); ...
为了更好地理解 FileEntry，本部分还提供了执行常规任务的众多技巧。创建文件您可以使用文件系统的 getFile()（DirectoryEntry 接口的一种方法）查找或创建文件。请求文件系统后，系统会向成功回调传递FileSystem 对象，其中包含指向该应用相应文件系统的根的 DirectoryEntry (fs.root)。以下代码会在该应用相应文件系统的根中创建名为“log.txt”的空白文件：
function onInitFs(fs) {
fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
// fileEntry.isFile === true
// fileEntry.name == 'log.txt'
// fileEntry.fullPath == '/log.txt'
}, errorHandler);
}
window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);请求文件系统后，系统会向成功处理程序传递 FileSystem 对象。我们可以将回调中的 fs.root.getFile() 命名为要创建的文件的文件名。您可以传递绝对路径或相对路径，但该路径必须有效。例如，如果您尝试创建一个其直接父级文件不存在的文件，将会导致出错。getFile() 的第二个参数是在文件不存在时从字面上说明函数行为的对象。在此示例中，create: true 会在文件不存在时创建文件，并在文件存在时 (exclusive: true) 引发错误。如果 create: false，系统只会获取并返回文件。无论是哪种情况，系统都不会覆盖文件内容，因为我们只是获取相关文件的引用路径。通过名称读取文件以下代码会检索名为“log.txt”的文件，并使用 FileReader API 读取文件内容，然后将其附加到页面上新的