[Vue.js] Vue-Cookies

 

🚀 Vue-Cookie

    🔽  개요

Cookie는 Browser(Client의 Local)에 저장하는 임시 저장소 같은 것이에요.

Cookie 삭제 등을 하게 되거나, 만료일이 지나게 되면 삭제 할 수 있답니다!
Cookie 외에 `localStorage`, `sessionStorage` 등 Local에 사용하는 저장소들이 또 있는 것이에요.

참고로 Cookie를 이용하게 되면 Data는 Browser에는 저장되지만, Server에는 저장 되지 않는 것이에요.
그렇기 때문에 보안에 관련된 정보는 절대 넣으면 안 되는 것이에요. 예:) 비밀번호

참고로 `vue-cooke`이랑 `vue-cookies`가 존재하는데, `vue-cookies`가 더 대중적이고, `Readme`도 잘 되어 있어 주니하랑은 이것을 이용할 것이에요.

Local에 Data를 저장할 때는 사용 용도에 맞게 세 가지 중 하나를 선택해야 하는 것이에요.

● Cookie의 크기는 `4096` Byte까지만 허용.
● 하나의 `Domain `당 20개까지만 허용.
● `Client`에 총 300개 까지만 저장 가능.

 

 

 

    🔽  설치

        📦 npm install vue-cookies

npm install vue-cookies

 

npm install vue-cookies

 

 

 

 

    🔽  사용법

        📦 main.js

main.js

반응형

먼저 `Vue-cookie`를 import하기 위해 4번째 줄처럼 Import를 해주고, 15 ~ 21번째 줄처럼 `Vue-cookie`에 대한 설정을 해 준 것이에요.

`expirt` 즉, 만료일은 7일로 해주었답니다.

 

💡 참고 사항
만료일 시간 기준

1 : 1초
60 * 60 * 12 : 12시간
60 * 60 * 25 * 30 : 한 달
1d : 하루
new Date(2022,04,01).UTCString() : 특정 시간