【Vue.js】LocalStorageにデータを保存する方法

公開日:2019-05-03
最終更新:2019-05-05
※この記事は外部サイト(https://jj-tech-blog.com/%E3%80%90vue-js%E...)からのクロス投稿です

Introduction

こんにちは、JJ(@JJ_1123_I)です!
今回は、「Vue.jsでLocalStorageにデータを保存方法」についてまとめていきたいと思います。

対象

  • Vue.js初心者の方

LocalStorageとは?

一言で表すとブラウザ(クライアント側)にデータを保有する機能です。Cookie に比べてデータ保存容量が大きく保存期間が長いので、様々なデータを保存可能なのが特徴です。
「ユーザごとのデータを保存して利用したいけどログイン機能をつけるほどでもない」という時に使えそうですね。ブラウザでユーザを識別出来るので、データを扱う手間が無くなります。

配列の変更を監視し、LocalStorageに保存

何らかの変更が加えられた際、LocalStorageに保存するとしたいと思います。
なので、$watchメソッドを利用すれば良いですね。ただ、以下だと配列の追加や削除を検出してくれますが、配列の中身の要素までは変更を検知してくれません。。。

var vm = new Vue({  
    el: '#app',  
    data: {  
        test: []  
    },  
    watch: {  
        tests: function() {  
                localStorage.setItem('tests', JSON.stringify(this.tests));  
        }  
    }  
})  

そこで、「deep watcher」という仕組みを使います。handlerと記載し、 deep オプションを true にします。これで配列の変更も検知して保存してくれるはずです。macOS だと 「option + command + I」 でデベロッパーツール開くので、その中の Application パネルで保存されているか確認してみてください。

var vm = new Vue({  
    el: '#app',  
    data: {  
        test: []  
    },  
    watch: {  
        tests: {  
             handler: function() {  
                localStorage.setItem('tests', JSON.stringify(this.tests));  
            },  
            deep: true  
        }  
    }  
})  

LocalStorageの呼び出し

あとは、マウントされるタイミングでデータが読み込みされれば良いので、 mountedにそのときの処理を関数の中に記載しましょう。

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

まとめ

localStorageは意外と簡単な記載だけでOKなので楽ですね。
あと、データの変更に対して反応する、watchオプションはとても便利。

参考

https://qiita.com/_Keitaro_/items/8e3f8448d1a0fe281648
https://webliker.info/how-to-use-localstrage/

記事が少しでもいいなと思ったらクラップを送ってみよう!
5
+1
テクノロジーに関する情報、学んだ事を発信します!

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする