今日のコード

See the Pen [Vue]メモアプリ by riotam (@riotam4) on CodePen.

localStotageに、1行メモを保存していくだけのアプリを作りました。使い方は見たままかと思うので、割愛します。本題は[こちら](https://qiita.com/riotam/items/f6655dade484a3a507ad#%E6%9C%AC%E9%A1%8C%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8%E3%81%AB%E3%83%A1%E3%83%A2%E3%82%92%E4%BF%9D%E5%AD%98) # 解説 ## メモの入力入力欄には、

HTML側7行目

<form @submit.prevent="addItem">
    <input type="text" v-model="newItem">
    <input type="submit">
</form>

このコードが待機しています。
もともと、この「newItem」には、

JS側3行目

data: {
    newItem: '',
    memos: []
},

ここで、空配列が代入されていましたが、newItem = {入力したメモ}として上書きされます。
そして、送信ボタンによってaddItemメソッドが発火されます。

メモの受け取り

addItemメソッドはこちら。

JS側19行目

addItem(){
    let item = {body: this.newItem}
    this.memos.push(item);
    this.newItem = '';
},

item変数にオブジェクトとして代入します。
bodyキーに「this.newItem」、つまり先ほど入力したメモそのものが代入され、先ほどのJS側3行目にも出ていた、memosに追加されます。追加された後、newItemには再び空文字を代入して、初期化しておきます。

メモをフロントに反映

このアプリはフロント側が、

HTML側2行目

<ul>
    <li v-for="memo in memos">
        <span>{{ memo.body }}</span>
    </li>
</ul>

このように準備していて、memosのbodyキーに値が入れば、自動的に反映されるようになっています。
この辺の説明は、Vue.jsの基本的な部分なので、ここでは割愛します。

本題！　ローカルストレージにメモを保存

今回のアプリでは作成されたメモは、ブラウザのローカルストレージに保存される仕様となっています。
これにより、ブラウザにメモのデータが残っているので、リロードしてもメモが消えることがありません。

ローカルストレージって何

HTML5から導入された、Cookieによく似たシステムで、ブラウザに5MBもの容量を、永続的に保存しておけます。
詳しくは、わかりやすいサイトがあったので、こちらをどうぞ。

ローカルストレージのコード実装部分

今回のアプリでは、

ローカルストレージへの保存部分
読み込み部分
これら2つが実装してあります。それぞれのコードは以下の通りです。

保存部分JS側7行目

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形式に変換されたものが、値として保存されています。

読み込み部分JS側15行目

mounted: function() {
    this.memos = JSON.parse(localStorage.getItem('memos')) || [];
},

mountedフックで、このページがマウントされたタイミングで、このメソッドが実行されます。
dataにある、memosに、ローカルストレージに保存されているデータを代入しています。

**保存されているデータは「localStorage.getItem()」で読み込まれます。**引数に、指定したいキーを入力しています。
今回は、保存時に「memos」として保存したので、その名前を入れています。
データはJSON形式で返ってくるので、「JSON.parse()」でオブジェクト化して認識しています。
もし、データがなければ、空配列を代入するようにしています。

さいごに

すごいざっくりしたアプリですが、ローカルストレージを使ってみたくて、ささっと作ってみました。
削除機能も削った、お粗末な仕様ですが、説明用のサンプルアプリとしてご容赦頂きたいです。

最後までありがとうございました。