今日のコード
See the Pen [Vue]メモアプリ by riotam (@riotam4) on CodePen.
localStotageに、1行メモを保存していくだけのアプリを作りました。
使い方は見たままかと思うので、割愛します。
本題はこちら
解説
メモの入力
入力欄には、
<form @submit.prevent="addItem">
<input type="text" v-model="newItem">
<input type="submit">
</form>
このコードが待機しています。
もともと、この「newItem」には、
data: {
newItem: '',
memos: []
},
ここで、空配列が代入されていましたが、newItem = {入力したメモ}
として上書きされます。
そして、送信ボタンによってaddItemメソッドが発火されます。
メモの受け取り
addItemメソッドはこちら。
addItem(){
let item = {body: this.newItem}
this.memos.push(item);
this.newItem = '';
},
item変数にオブジェクトとして代入します。
bodyキーに「this.newItem」、つまり先ほど入力したメモそのものが代入され、先ほどのJS側3行目にも出ていた、memosに追加されます。追加された後、newItemには再び空文字を代入して、初期化しておきます。
メモをフロントに反映
このアプリはフロント側が、
<ul>
<li v-for="memo in memos">
<span>{{ memo.body }}</span>
</li>
</ul>
このように準備していて、memosのbodyキーに値が入れば、自動的に反映されるようになっています。
この辺の説明は、Vue.jsの基本的な部分なので、ここでは割愛します。
本題! ローカルストレージにメモを保存
今回のアプリでは作成されたメモは、ブラウザのローカルストレージに保存される仕様となっています。
これにより、ブラウザにメモのデータが残っているので、リロードしてもメモが消えることがありません。
ローカルストレージって何
HTML5から導入された、Cookieによく似たシステムで、ブラウザに5MBもの容量を、永続的に保存しておけます。
詳しくは、わかりやすいサイトがあったので、こちらをどうぞ。
ローカルストレージのコード実装部分
今回のアプリでは、
1. ローカルストレージへの保存部分
2. 読み込み部分
これら2つが実装してあります。それぞれのコードは以下の通りです。
watch: {
memos: {
handler: function() {
localStorage.setItem('memos', JSON.stringify(this.memos));
},
deep: true
}
},
watchフックでmemosをdeepモードで監視しています。詳細についてはこちら。
何か変更があったら、handlerの中のメソッドが起動します。
保存については、「localStorage.setItem()」が使われます。
引数1で「memos」キー、引数2の「JSON.stringify(this.memos)」によって、dataのmemosがJSON形式に変換されたものが、値として保存されています。
mounted: function() {
this.memos = JSON.parse(localStorage.getItem('memos')) || [];
},
mountedフックで、このページがマウントされたタイミングで、このメソッドが実行されます。
dataにある、memosに、ローカルストレージに保存されているデータを代入しています。
保存されているデータは「localStorage.getItem()」で読み込まれます。引数に、指定したいキーを入力しています。
今回は、保存時に「memos」として保存したので、その名前を入れています。
データはJSON形式で返ってくるので、「JSON.parse()」でオブジェクト化して認識しています。
もし、データがなければ、空配列を代入するようにしています。
さいごに
すごいざっくりしたアプリですが、ローカルストレージを使ってみたくて、ささっと作ってみました。
削除機能も削った、お粗末な仕様ですが、説明用のサンプルアプリとしてご容赦頂きたいです。
最後までありがとうございました。