[Vue] Cookie 사용하기

vue-cookies

 

Cookie 는 client 단(로컬)에 저장하는 임시 저장소 같은것입니다.

쿠키 삭제등을 하게되거나 만료일이 지나면 삭제될 수 있습니다.

쿠키 외에 localStorage, sessionStorage 등이 로컬에 사용하는 저장소 입니다.

로컬에 저장할 무언가가 있을 때 사용 용도에 따라 세가지 중 하나를 선택해서 사용하셔야 합니다.

• 쿠키의 크기는 4096 바이트까지만 허용
• 하나의 도메인당 :20 개.
• 클라이언트에 총 300 개 까지 저장

vue-cookies 설치

npm install vue-cookies

 

main.js

// cookie
import VueCookies from "vue-cookies"
Vue.use(VueCookies);
Vue.$cookies.config("1d") // expire 1일 (global 설정)

 

사용법

<template>
  <div>
    <a @click="getTest">get cookie</a><br>
    <a @click="setTest">set cookie</a><br>
    <a @click="resetTest">reset cookie</a><br>
  </div>
</template>

<script>
import VueCookies from 'vue-cookies'
export default {
  name: 'CookieTest',
  methods: {
    getTest: () => {
      if (VueCookies.isKey('test')) { alert(VueCookies.get('test')) } else {
        alert('값 없음')
      }
    },
    setTest: () => {
      VueCookies.set('test', new Date())
    },
    resetTest: () => {
      VueCookies.remove('test')
      alert('삭제됨')
    }
  }
}
</script>

 

//모든 쿠키 키 가져오기
VueCookies.keys().join("\n");

//모든 쿠키 다 지우기
VueCookies.keys().forEach((cookie) => VueCookies.remove(cookie));