§09-02Forms
Autosave (status 表示)
入力を自動保存し状態を表示する。
保存ボタンを押し忘れても入力が失われず、保存されたかどうかを常に確認できる。長文編集や複数項目の設定画面で安心感を与える。
実装のポイント
入力が止まってから保存するデバウンスにし、「未保存」「保存中」「保存済み」を区別して出す。保存失敗時は再試行とローカル退避を用意する。
- 特徴
- タイマー
- 非同期
- デモで使っているもの
- shadcn/ui
- lucide-react
- ソース
- autosave.tsx