目次
vue-cookiesとは
vue-cookiesは、Vue.jsでcookieを操作するライブラリです。
Cookieの追加はもちろん削除やタイマーを設定することも可能です。
ブラウザが持っているCookieの一覧を取得することもできます。
【動画サイズ:108KB】
環境
この記事は、以下の管理人の検証環境にて記事にしています。
vue.js | 2.6.10 |
vue-cookies | 1.7.3 |
ライブラリの取得
ライブラリを取得するには、npm, CDNのどれか一つを使用します。
npm
npm install vue-cookies --save
CDN
<script src="https://unpkg.com/[email protected]/vue-cookies.js"></script>
gitリポジトリは以下から取得できます。
導入手順
管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、Cookieを操作します。
step
1ライブラリの呼び出し
まずライブラリを呼び出す為に、以下の2通りのケースで呼び出します。
ES6等で実装する場合
import VueCookies from 'vue-cookies' Vue.use(VueCookies)
UMDで実装する場合
呼び出しの必要なし
step
2メソッドを設定
this.$cookies
でvue-cookiesのAPIを使用します。APIの使用方法は、当記事のAPIの項目をご確認ください。
今回のサンプルでは、setCookieを使ってCookieを作成します。
作成されたCookieをgetCookieにて取得します。
new Vue({ el: '#app', data:{ CookieValue: '' }, methods: { getCookie:function(key){ return "【Get Cookie Value】 "+this.$cookies.get('CookieValue'); }, setCookie:function(){ this.$cookies.config(60 * 60 * 24 * 30,''); this.$cookies.set('CookieValue', this.CookieValue); location.reload(); } } });
step
3テンプレートを準備
上記で作成したメソッドを使用して、Cookieの作成、取得を行いました。
サンプルはケバブケースで記載しています。
<div id="app"> <div class="input-group mb-3"> <div class="input-group-prepend"> <button class="btn btn-outline-secondary" type="button" id="button-addon1" @click="setCookie()">Set Cookie Button</button> </div> <input type="text" class="form-control" placeholder="Enter cookie value" aria-label="Example text with button addon" aria-describedby="button-addon1" v-model="CookieValue"> </div> <pre v-html="getCookie()"></pre> </div>
サンプル
今回のソースを実際に触って確認できるようにデモを用意しました。
See the Pen Vue.jsでCookieを操作する「vue-cookies」 by カバの樹 (@kabanoki) on CodePen.dark
API
vue-cookiesが提供しているAPIは以下になります。
Cookieのconfigを設定する
$cookies.config(expireTimes[,path[, domain[, secure[, sameSite]]])
Cookieを設定する
//this. or Vue. $cookies.set(keyName, value[, expireTimes[, path[, domain[, secure[, sameSite]]]]])
対象のCookieの値を取得する
//this. or Vue. $cookies.get(keyName)
対象のCookieを削除する
//this. or Vue. $cookies.remove(keyName [, path [, domain]])
対象のCookieが存在するかを確認する
//this. or Vue. $cookies.isKey(keyName)
CookieのKeyの一覧を配列で取得する
//this. or Vue. $cookies.keys()
さいごに
cookieを操作するでした。
今日はこの辺でー