Quasar 에서 Cookies 사용하기

요즘 Quasar 프레임워크를 이용해서 웹페이지를 개발하고있다.

메인페이지에 공지사항을 띄워야하는데 1일동안 보지않기 기능이 필요했다.
이 기능에는 보통 쿠키를 사용하는데, Quasar 에서 자체적으로 지원해주는 플러그인이 있어서 아주 쉽게 구현할수있다.

우선 플러그인 사용을위해, quasar.conf.js에 Cookies를 추가해준다.

// quasar.conf.js
return {
  framework: {
    plugins: ['Cookies'],
  },
};

그리고 해당 플러그인을 사용하길 원하는 페이지의 <script> 상단에 import 해준다

<script>

import {Cookies} from "quasar";

...
</script>

이제 methods에 특정 버튼을 클릭했을때 쿠키를 생성하는 코드를 넣어주면된다

쿠키 플러그인 사용법 및 옵션은 Quasar cookies문서에서 확인할수있다.

<script>
import { Cookies } from 'quasar';

export default {

  ...

  methods: {
    //쿠키이름, 값, 옵션(1일후 만료)
    setCookie() {
      Cookies.set('test-cookie', true, { expires: '1d' });
    },

  },

  ...
};
</script>

이제 메인페이지 접속했을때 쿠키가 있는지 없는지 확인후 창을 띄울것인지 아닌지 정하면 된다.

// 이름이 test-cookie인 쿠키를 가져온다, 만약 쿠키가 없으면 null
const value = Cookies.get('test-cookie');

if (value !== true) {
  //쿠키가 true가 아니면 창 띄우는 코드
}

PS.

쿠키는, Chrome 브라우저에서 F12를 누르고
Console 창에 console.log(document.cookie); 를 입력하면 바로 확인할수있다.

Application > Storage > Cookies 에서도 확인할수있다