Sistem File HTML5 adalah API yang canggih. Kekuatan akan menimbulkan kompleksitas. Dengan kompleksitas, akan ada lebih banyak frustrasi proses debug. Sayangnya, DevTools Chrome saat ini tidak memiliki dukungan untuk Filesystem API. Hal ini membuat proses debug menjadi lebih sulit dari yang seharusnya. Yang dimaksud dengan sulit adalah diwajibkan untuk menulis kode guna mencantumkan/menghapus file dalam sistem file.
Selama upaya saya dengan Filesystem API, saya mendapatkan beberapa tips yang ingin saya sampaikan. Setiap tips memiliki serangkaian batasan tersendiri, tetapi menggunakan kombinasi dari tips ini akan membantu Anda mencapai 90% dari tujuan. Berikut 5 teratas:
Pastikan Anda tidak menjalankan dari
file://
. Ini adalah masalah tersembunyi yang banyak dialami orang. Chrome menerapkan pembatasan keamanan utama padafile://
. Banyak API file lanjutan (BlobBuilder
,FileReader
, Filesystem API,...) menampilkan error atau gagal secara diam-diam jika Anda menjalankan aplikasi secara lokal darifile://
. Jika Anda tidak memiliki server web, Chrome dapat dimulai dengan tanda--allow-file-access-from-files
untuk mengabaikan batasan keamanan ini. Hanya gunakan tanda ini untuk tujuan pengujian.SECURITY_ERR
atauQUOTA_EXCEEDED_ERR
yang ditakuti. Hal ini biasanya terjadi saat mencoba menulis data, tetapi Anda berada di bawah pengaruh #1. Jika tidak, kemungkinan Anda tidak memiliki kuota. Ada dua jenis kuota yang dapat digunakan untuk membuka sistem file, yaituTEMPORARY
atauPERSISTENT
. Jika Anda menggunakan yang terakhir, pengguna harus memberikan penyimpanan persisten secara eksplisit ke aplikasi Anda. Lihat postingan ini tentang cara melakukannya.URL
filesystem:
FTW. Buka URLfilesystem:
untukDirectoryEntry
root asal aplikasi Anda. Apa artinya? Misalnya, jika aplikasi Anda berada diwww.example.com
, bukafilesystem:http://www.example.com/temporary/
di tab baru. Chrome akan menampilkan daftar file/folder yang disimpan asal aplikasi Anda yang bersifat hanya baca. Untuk mengetahui informasi selengkapnya tentang URLfilesystem:
, lihat https://www.html5rocks.com/en/tutorials/file/filesystem/#toc-filesystemurls.chrome://settings/cookies
adalah teman Anda. Halaman ini memungkinkan Anda menghapus data yang disimpan untuk origin. Hal ini mencakup penyimpanan database, AppCache, cookie, localStorage, dan hal-hal di FileSystem API. Namun, perhatikan bahwa Anda harus menyelesaikan proses ini atau tidak melakukannya sama sekali. Anda tidak dapat menghapus hanya satu file atau bagian data.Jangan lupa callback error. Filesystem API berada di dunia asinkron (kecuali jika Anda menggunakan versi sinkron di Pekerja). Selalu gunakan callback error dalam panggilan API Anda. Hal ini bersifat opsional, tetapi Anda akan terhindar dari banyak masalah di kemudian hari saat terjadi masalah.