Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use HTML5 FileSystem API". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use HTML5 FileSystem API.

One of the strengths of HTML5 is to allow web programs to apply for temporary or permanent Quota where data storage and even file operations can be carried out.

FileSystem provides the creation, movement and deletion of folders and files, which greatly facilitates the local processing of the data, and all the data are in sandboxie (sandboxed), different web programs can not access each other, which ensures the integrity and security of the data.

In the CatWrite project, it is very convenient to use this feature of HTML5 for data storage, but at present, only Chrome browser supports FileSystem API better, so it can only be run in Chrome browser.

In the completion of this function, I consulted a lot of data, some of which were from a year ago, but with the change of the browser version, some of the code has been aging, which is summarized and sorted out here one by one. Only the API used in the project is listed here, which can be regarded as a comb to complete the function.

Apply for space

In order to store the data, you must apply to the browser, and if it is permanent storage, you will also ask the user, and the execution will not continue until you agree to it.

You must first declare the permissions you want.

Copy the code

The code is as follows:

Window.requestFileSystem = window.requestFileSystem | | window.webkitRequestFileSystem; / / File system request ID

Window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL | | window.webkitResolveLocalFileSystemURL; / / obtain the read permission of the file according to URL

After getting the permission of the system, you can apply for space from the browser.

Copy the code

The code is as follows:

Window.requestFileSystem (window.PERSISTENT, / / persistent (permanent) or temporary (temporary)

1024 million 1024, / / 1m

OnInitFs, / / callback function after success

ErrorHandler); / / callback function after error

Callback function

Copy the code

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 + = 'Invalid filetype'

Break

Default:

Msg + = 'Unknown Error'

Break

}

Console.log (msg + err)

}

If you successfully regret calling the OnInitFs callback function, you use the getDirectory method to create a folder, which we'll talk about later.

But there is a problem. If we do this, we will apply every time the page is loaded, which is definitely not what we want. What we want is to be able to read the data when it is available.

Determine whether or not you have applied for space.

So we need to read the browser's data to see if it is already stored. This uses another API:

Copy the code

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, and if successful, it will call the successCallback callback function and pass the used space and all space as parameters to the method. If it fails, transfer to errorCallback.

Copy the code

The code is as follows:

Window.webkitStorageInfo.queryUsageAndQuota (webkitStorageInfo.PERSISTENT

Function (used, remaining) {

If (remaining = "") {

Console.log ("Space not requested.")

} else {

Console.log (Space used + used)

Console.log ("all spaces" + remaining)

}

}

ErrorHandler)

We can determine whether there is application space by judging the remaining parameter. If there is no application, we can return to the previous application space. If you already have space, you need to get the space and files so that you can manipulate the data.

Get file entry

FileSystem uses a special file system and sandboxie mode. Files in sandboxie cannot be accessed on a computer or in other web, so they can only be accessed in the corresponding format.

Enter in the browser:

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

In this way, you can access the catcoder.com site to persist data locally, and replacing persistent with temporary is to read temporary space.

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

Copy the code

The code is as follows:

Void resolveLocalFileSystemURL (

In DOMString url

In EntryCallback successCallback

In optional ErrorCallback errorCallback

);

Next, you can read the data stored on this machine.

Copy the code

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 files!")

} else {

Console.log ("read to" + results.length + "files")

For (var I = 0; I < results.length; iTunes +) {

Console.log (results [I] .name)

GetFileContentByName (fileEntry, results [I] .name)

}

}

}, errorHandler)

}

ReadEntries ()

}, errorHandler)

At this point, I believe you have a deeper understanding of "how to use HTML5 FileSystem API". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.