Vue.jsでCookieを操作する「vue-cookies」

vue-cookiesとは

vue-cookiesは、Vue.jsでcookieを操作するライブラリです。

Cookieの追加はもちろん削除やタイマーを設定することも可能です。
ブラウザが持っているCookieの一覧を取得することもできます。

【動画サイズ：108KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, CDNのどれか一つを使用します。

npm install vue-cookies --save

<script src="https://unpkg.com/[email protected]/vue-cookies.js"></script>

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、Cookieを操作します。

step
1ライブラリの呼び出し

まずライブラリを呼び出す為に、以下の２通りのケースで呼び出します。

ES6等で実装する場合

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

UMDで実装する場合

呼び出しの必要なし

step
2メソッドを設定

今回のサンプルでは、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を操作するでした。

今日はこの辺でー