localStorageにVueからデータを書き込んでみる。公式のチュートリアルを参照。
マウントと監視
See the Pen localStorage test by git-cat-meow (@git-cat-meow) on CodePen.
Devツールのアプリケーションで確認すると、たしかにlocalStorageにデータが書き込まれている。
mountedはlocalStorageの値をロードする役割。watchは情報の変更を監視する。この場合、mountedでローカルストレージに値があればマウントし、その後はフォームを監視し、変更があればローカルストレージに書き込むという流れ。
Saveボタンをつける
See the Pen localStorage test2 by git-cat-meow (@git-cat-meow) on CodePen.
常に監視していると大変なことになるので、Saveボタンが押された場合に情報を書き込むパターン。persist関数を作って、@clickで呼び出す運び。
基本的な仕様は分かったが、保存したいデータは配列なので引き続き調査を進める。