Quasarでcookiesを扱う方法

• 概要
• 環境
• サンプルコード
• ちょっと解説
• 参考サイト

概要

q-carousel の使い方をサンプルコード付きで紹介します
今回は q-btn-toggle を組み合わせて使いQuasar で Cookies を扱う方法を紹介します

環境

• macOS 11.7
• node 18.9.0
• quasar 2.8.2

サンプルコード

• vim src/pages/IndexPage.vue

<template>
  <q-btn label="Save" @click="saveCookie()" />
  <q-btn label="Clear" @click="clearCookie()" />
  <div>{{ userName }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Cookies } from 'quasar'

const cookieName = 'my_cookie_name'
const userName = ref(Cookies.get(cookieName))

const saveCookie = () => {
  const hasIt = Cookies.has(cookieName)
  if (!hasIt) {
    Cookies.set(cookieName, 'hawksnowlog')
  }
  userName.value = Cookies.get(cookieName)
}

const clearCookie = () => {
  Cookies.remove(cookieName)
  userName.value = Cookies.get(cookieName)
}
</script>

ちょっと解説

書き込む際は Cookies.set を使います
読み込む際は Cookies.get を使います
存在するかのチェックは Cookies.has を使います

なおオプションで期限やドメイン情報などを設定することができます

参考サイト

• https://quasar.dev/quasar-plugins/cookies