イシュー「お絵かき途中のデータをLocalStrageに保存したい」への対応。
作ったもの
作業途中のドット絵のデータをローカルストレージに格納しておくことで
ページを離れても、前回の続きから作業ができる。
自動保存したデータを自動的に復元することで、
逆にお絵かきエリアをリセットしてまっさらな状態に戻す機能が必要となったので追加した。
あと、ついでにファイルメニュー内の並びも微調整した。
クラス図
追加したのは、LocalStrageConnectorクラス。
最初にローカルストレージにデータが在れるどうかを判断して、
在ればそのデータを元にお絵かき内容を再現している。
ちなみに、なかったときにはこれまでと同じ処理でもよかったのだが、
なかった場合には、内容がほぼ空のPixcelArtDataをWorkspaceに入れる仕様に変更した。
これにより、ローカルストレージにデータが在っても無くても
Workspaceの初期化方法が統一されたので、すっきりした。
つまづきポイント
ローカルストレージ内のデータの有無判定に注意
ローカルストレージのデータを取得するとき、
データがなかった場合は{}という値が戻ってくる。
戻り値の有無だけで判定すると
かならずtrueになってしまうため注意が必要。
対策としては、戻り値を一度JSON.parseして、
内部の情報を元に判定するのが良い。
参考：LocalStorageの内容があるかどうかif文で知りたい
ローカルストレージ内のデータを目視で確認する方法
ChromeのデベロッパーツールのApplicationタブで確認できる。
内容が書き換わったても、
Consoleとは違って同じ位置に表示されるので
データ内容を確認するのに便利。
参考：ローカルストレージに保存されたデータをChrome上で確認する方法 | 電脳産物
追加したイシュー
ひとこと
データ容量が軽くなるようにしてて良かった。
