ブラウザのローカルストレージを使った ToDo List
YUI2 にクライアントサイドのストレージ (ブラウザのローカルストレージ) を扱う Storage Utility があるので、それを使って簡単な ToDo List を作ってみた。
データはブラウザのストレージに保存されるので (HTML5 のローカルストレージか、Gears、または Flash のストレージ)、サーバ側には何も送られない。当たり前だが、ブラウザを超えてデータは引き継がれない (Firefox で編集したデータは Safari では見れない)。 動作は、Safari 4、Firefox 3.5、IE8、Chrome で確認した。コードはまた来年にでも、もう少しきれいなものに書き直したい。
YUI の Storage Utility を使うと、データを同じメソッドで (上に書いた 3 つの内のいずれかのストレージに) key - value の形で簡単に保存できる。この ToDo List では、ToDo リストの JSON データを YUI の JSON Unility で文字列にして (YAHOO.lang.JSON.stringify(json_data) でできる)、取り出した時は parse して (YAHOO.lang.JSON.parse(json_data) で parse) 使っている。
その他の特徴としては、
- ToDoリストのアイテムは Drag & Drop で並べ替え
- Delete した直後なら、Undo できる
- Completed リスト(完了した項目)はまとめて削除できる(Undo できない)
あと、機能とは関係ないけど、画像を一切使ってない。グラデーションは下のツールで生成したコードを使った。
