:::

被人遺忘的Filesystem API / HTML5 Filesystem API

2023-0114-222234.png

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


資料保存 / Data persistence

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

https://stackoverflow.com/a/19017498 

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

那有沒有更好的做法呢?

Filesystem API

https://pepa.holla.cz/wp-content/uploads/2016/03/Using-the-HTML5-Filesystem-API.pdf 

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

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

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

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

https://github.com/pulipulichen/PWA-Todo-List/blob/main/src/utils/FileSystemUtils.js

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

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


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

下面說說你的看法吧!

總共2 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 你的網誌原本很有料,現在版型很糟!

    標題圖檔一大塊,真正內文只有兩行字。可以改一下嗎...至少 title 圖檔不要那麼大!

    回覆刪除