Introduction to using HTML5 FileSystem APIs

Comments: One of the most powerful features of HTML5 is to allow web programs to apply for temporary or permanent space (Quota) where data storage and even file operations can be performed.

One of the strengths of HTML5 is that it allows web programs to apply for temporary or permanent space (Quota) where data storage and even file operations can be performed.

FileSystem provides operations such as creating, moving, and deleting folders and files, which greatly facilitates local data processing, and all data is stored in sandboxed, different web programs cannot access each other, which ensures data integrity and security.

In the CatWrite project, it is very convenient to store data using the HTML5 feature, but currently only Chrome browser supports FileSystem APIs better, so it can only run in Chrome.

When I completed this function, I checked a lot of materials, some of which were made a year ago. However, with the changes in the browser version, some code has become aging. Here I will summarize and sort out them one by one. Only the APIs used in the project are listed here, which is a sort of completing the functions.

Application Space
In order to store data, you must apply to the browser. If the storage is permanent, you will be asked to continue the operation only after you agree.

First, you must declare the desired permissions.

The Code is as follows:
Window. requestFileSystem = window. requestFileSystem | window. webkitRequestFileSystem; // file system request ID
Window. resolveLocalFileSystemURL = window. resolveLocalFileSystemURL | window. webkitResolveLocalFileSystemURL; // obtain the file read permission based on the URL

After obtaining system permissions, you can apply for a space from the browser.

The Code is as follows:
Window. requestFileSystem (window. PERSISTENT, // persistent (permanent) or temporary (temporary)
1024*1024, // 1 M
OnInitFs, // callback function after successful
ErrorHandler); // callback function after error

Callback Function

The Code is as follows:
Function onInitFs (fs ){
Fs. root. getDirectory ('catwrite _ documents', {create: true}, function (dirEntry ){
Console. log ('you have just created the '+ dirEntry. name + 'directory .');
}, ErrorHandler );
}
// Error callback
Function errorHandler (err ){
Var msg = 'an error occured :';
Switch (err. code ){
Case FileError. NOT_FOUND_ERR:
Msg + = 'file or directory not found ';
Break;
Case FileError. NOT_READABLE_ERR:
Msg + = 'file or directory not readable ';
Break;
Case FileError. PATH_EXISTS_ERR:
Msg + = 'file or directory already exists ';
Break;
Case FileError. TYPE_MISMATCH_ERR:
Msg + = 'invalidfiletype ';
Break;
Default:
Msg + = 'unknown error ';
Break;
};
Console. log (msg + err );
}

If you regret calling the OnInitFs callback function, you can use the getDirectory method to create a folder.

However, this is a problem. In this case, we will apply for page loading every time. This is definitely not what we want. What we want is to be able to read data when there is data.

Determine whether space has been applied
So we need to read the data from the browser to see if there is any storage. This uses another API:

The Code is as follows:
Void queryUsageAndQuota (
In DOMString url,
In EntryCallback successCallback,
In optional ErrorCallback errorCallback
);

This API can query the current web space. If it succeeds, it will call the successCallback callback function and pass in the used space and all space as parameters to the method. If the call fails, call errorCallback.

The Code is as follows:
Window. webkitStorageInfo. queryUsageAndQuota (webkitStorageInfo. PERSISTENT,
Function (used, remaining ){
If (remaining = ""){
Console. log ("no space requested. ");
} Else {
Console. log ("used space" + used );
Console. log ("All spaces" + remaining );
}
},
ErrorHandler); </p> <p>
The remaining parameter can be used to determine whether the application space exists. If the application space is not applied, the previous application space is returned. If you already have space, you need to get the space and file to operate the data.

File Retrieval Portal
FileSystem uses a special file system and sandbox mode. Files in the sandbox cannot be accessed on a computer or other web pages, and can only be accessed in the corresponding format.

Enter:

? Filesystem: http://catcoder.com/persistent/
　　

In this way, you can access the catcoder.com website to read permanent data on the local machine. Changing persistent to temporary is to read temporary space.

Then we can get the file entry through the URL and corresponding API (Lets you look up the entry for a file or directory with a local URL ).

The Code is as follows:
Void resolveLocalFileSystemURL (
In DOMString url,
In EntryCallback successCallback,
In optional ErrorCallback errorCallback
);

The data stored on the local machine can be read below.

The Code is as follows:
Var url = "filesystem: http: //" + window. location. host + "/persistent/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 ("default file ","");
Console. log ("no file! ");
} Else {
Console. log ("read to" + results. length + "Files ");
For (var I = 0; I <results. length; I ++ ){
Console. log (results [I]. name );
GetFileContentByName (fileEntry, results [I]. name );
}
}
}, ErrorHandler );
};
ReadEntries ();
}, ErrorHandler );