Vue.js - 쿠키 사용 (vue-cookies)

쿠키(Cookie)

• 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일
• 즉, 브라우저에 저장되는 데이터를 말함
• 서버에 저장되는 데이터는 세션이라고 부름

 

Vue에서 쿠키 사용

• vue-cookies 설치 (터미널 창에서 설치)

npm install vue-cookies

• vue-cookies 임포트하기

import VueCookies from "vue-cookies"

• 글로벌 만료일 설정

VueCookies.config("7d");  // 만료 기간 입력

• 쿠키 생성

VueCookies.set("키", "값", "만료일[생략 가능]");

VueCookies.set("key", "value");  // key라는 이름의 쿠키(값은 value) 생성

• 쿠키 가져오기 (없을 경우 null)

const cookie_data = VueCookies.get("key");
console.log(cookie_data);  // 출력 값: value

• 쿠키 삭제

 VueCookies.remove("key");

• 쿠키 존재 여부

VueCookies.isKey("key");  // false

• 모든 쿠키 가져오기

VueCookies.keys();  // 배열 형식으로 가져옴

VueCookies.keys().join("\n");  // 한 줄로 바꾸기

• 모든 쿠키 삭제

VueCookies.keys().forEach(cookie => VueCookies.remove(cookie));

 

참고 링크 1: https://www.npmjs.com/package/vue-cookies

vue-cookies

참고 링크 2: https://kyounghwan01.github.io/blog/Vue/vue/vue-cookies/

vue-cookies 사용법