Pengenalan kepada penggunaan kemahiran tutorial HTML5 FileSystem API_html5

Salah satu kekuatan HTML5 ialah ia membolehkan program web memohon untuk beberapa ruang sementara atau kekal (Kuota) di mana penyimpanan data dan juga operasi fail boleh dilakukan.

FileSystem menyediakan operasi seperti mencipta, mengalih dan memadam folder dan fail, yang sangat memudahkan pemprosesan data setempat Selain itu, semua data berada dalam kotak pasir (kotak pasir), dan program web yang berbeza tidak boleh mengakses satu sama lain integriti dan keselamatan data.

Dalam projek CatWrite, ciri HTML5 ini digunakan untuk menyimpan data, yang sangat mudah Namun, pada masa ini hanya penyemak imbas Chrome yang menyokong API FileSystem, jadi ia hanya boleh dijalankan dalam penyemak imbas Chrome.

Apabila melengkapkan fungsi ini, saya telah merujuk banyak maklumat beberapa tahun yang lalu, namun, dengan perubahan dalam versi penyemak imbas, beberapa kod telah menjadi lapuk dan menyusunnya satu demi satu. Hanya API yang digunakan dalam projek disenaraikan di sini, yang merupakan ringkasan fungsi yang lengkap.

Mohon ruang
Untuk menyimpan data, anda mesti memohon kepada penyemak imbas Jika ia adalah storan kekal, pengguna akan diminta dan pelaksanaan akan diteruskan hanya selepas persetujuan.

Mula-mula anda mesti mengisytiharkan kebenaran yang diingini.

Salin kod

Kod adalah seperti berikut:

window.requestFileSystem = window. requestFileSystem ||. window.webkitRequestFileSystem; //Pengenalpastian permintaan sistem fail
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL; >Selepas mendapat kebenaran sistem Anda boleh memohon ruang daripada penyemak imbas

Salin kod

Kod adalah seperti berikut:

tetingkap requestFileSystem(window.PERSISTENT, //persistent(kekal) atau sementara(sementara)

1024*1024, //1M

onInitFs, //fungsi panggil balik selepas kejayaan
errorHandler); //selepas ralat Fungsi panggil balik


Fungsi panggil balik

Salin kod

Kodnya adalah seperti berikut:

function onInitFs(fs){

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

console .log('Anda baru sahaja mencipta direktori ' dirEntry. name '.'); var msg = 'Ralat berlaku: ';
suis (err.code) {
case FileError.NOT_FOUND_ERR:
msg = 'Fail atau direktori tidak ditemui'; FileError.NOT_READABLE_ERR:
msg = 'Fail atau direktori tidak boleh dibaca'; > case FileError.TYPE_MISMATCH_ERR:
msg = ' Jenis fail tidak sah';
lalai:
msg = 'Ralat Tidak Diketahui'; .log(msg err);
}


Jika anda berjaya, anda akan menyesal memanggil fungsi panggil balik OnInitFs dan menggunakan kaedah getDirectory untuk mencipta folder, yang akan dibincangkan di bawah.

Tetapi ada masalah jika anda melakukan ini, ia akan digunakan setiap kali halaman dimuatkan.


Tentukan sama ada ruang telah digunakan untuk

Jadi kita perlu membaca data penyemak imbas untuk melihat sama ada ia telah disimpan. Ini menggunakan API lain:





Salin kod


Kodnya adalah seperti berikut:

void queryUsageAndQuota( dalam url DOMString,

dalam EntryCallback successCallback,

dalam ErrorCallback errorCallback pilihan

); jika berjaya Fungsi panggil balik successCallback akan dipanggil dan ruang yang digunakan serta jumlah ruang akan dihantar ke kaedah sebagai parameter. Jika gagal, errorCallback dipanggil.

Salin kod

Kod tersebut adalah seperti berikut:

window.webkitStorageInfo.queryUsageAndQuota(webkitStorageInfo.PERSISTENT, fungsi
(digunakan, baki){
if(baki == ""){
console.log("Tiada ruang digunakan. ");
}lain{
console.log("ruang terpakai" digunakan);
console.log("semua ruang" tinggal);
}
},
errorHandler );

Kita boleh menilai sama ada terdapat ruang aplikasi dengan menilai baki parameter Jika tiada permohonan, kembali ke langkah sebelumnya untuk memohon ruang. Jika sudah ada ruang, anda perlu mendapatkan ruang dan fail supaya anda boleh mengendalikan data.

Dapatkan entri fail
FileSystem menggunakan sistem fail khas dan mod kotak pasir tidak boleh diakses pada komputer atau web lain.

Taip dalam penyemak imbas anda:

?sistem fail:http://catcoder.com/persistent/
　

Dengan cara ini, anda boleh mengakses data kekal tapak web catcoder.com pada mesin ini Gantikan berterusan dengan sementara untuk membaca ruang sementara.

Kemudian kami boleh mendapatkan kemasukan fail melalui URL dan API yang sepadan (Membolehkan anda mencari masukan untuk fail atau direktori dengan URL tempatan).

Salin kod

Kod tersebut adalah seperti berikut:

void resolveLocalFileSystemURL(
dalam url DOMString ,
dalam EntryCallback successCallback,
dalam ErrorCallback errorCallback pilihan
);

Anda boleh membaca data yang disimpan pada mesin di bawah

Salin kod

Kod tersebut adalah seperti berikut:

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 ("Tiada fail!");
}lain{
console.log("Read results.length "files");
for(var i = 0; i < results . panjang; i ){
console.log(hasil[i].nama); ;
};
bacaEntri();