Vue

Vue.js localStrageにデータを保存する

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で呼び出す運び。

基本的な仕様は分かったが、保存したいデータは配列なので引き続き調査を進める。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る