被人遺忘的Filesystem API / HTML5 Filesystem API

1月 25, 2023 FilesystemAPI , HTML5 , JavaScript 2 Comments Edit Copy Download

如果要在網頁應用程式裡面保存檔案的話，你會怎麼做呢？

資料保存 / Data persistence

在HTML5以前，大家是用<form>的post上傳檔案，把檔案保存在遠端伺服器上。在HTML5之後，雖然很多離線保存的功能逐漸成熟，但如果要保存使用者自訂的檔案，似乎大家還是比較習慣把檔案上傳到遠端伺服器。

有啦，有部分的人會把二進制檔案轉換成Base64格式，再把它保存到localStorage裡面。這樣做很簡單，我貪快的時候也會這樣做，但localStorage每個網域的檔案上限只有10MB，其實不適合保存大型檔案。

那有沒有更好的做法呢？

如果要讓使用者離線保存自己在瀏覽器上的操作，那Filesystem API可能是最好的選擇。

Filesystem API就是瀏覽器內的檔案系統。它跟localStorage這使用者端的API很像，只是它是用檔案系統的方式操作。所有你在伺服器檔案系統可能會用到的指令，例如檔案的建立與移除、資料夾的建立與移除，它也是一應舉全。

我大概在2021年知道這個API，並在Blogger Editor專案裡使用它。最近為了開發TODO應用程式，我又複習了Filesystem API。

只是...Filesystem API其實很麻煩。它要求的非同步操作實在是太多，很容易陷入callback地獄。這個問題到了2023年顯然還是沒有什麼改善，甚至也沒什麼人願意製作Filesystem API的工具。

既然如此，那我自己來吧。這個就是我目前是用的Filesystem API包裝工具。

未來我應該還會在很多專案繼續使用Filesystem API吧。明明這麼好用，真搞不懂為什麼它這麼不受歡迎。

HTML5提供的這麼多種離線儲存工具，你常用那一種呢？

下面說說你的看法吧！