[Vue] Cookie 설정으로 하루보지 않기 설정 + 테스트 방식 공유

Vue2 에서 Cookie 설정하기

 

쿠키 있나 없나 확인 > 오늘하루보지않기 클릭액션 > 쿠키 저장 > 테스트

 

쿠키 저장에 대한 테스트는 1분으로 잡고

1분 뒤, 쿠키가 정상으로 작동되면서 팝업창의 여부를 체크하면된다!

그리고 다시 하루로 잡고 애플리케이션 > 쿠키 에서 정상적으로 값이 들어가 있는지 확인..!

 

mounted(){
    this.getCookie();
},
methods:{

    //쿠키확인
    getCookie() {
        let cookiedata = document.cookie;
        if (cookiedata.indexOf("todayCookie=done") < 0) {
          this.floatingInfo = true; //쿠키 없으면 띄우기
        } else {
          this.floatingInfo = false; //쿠키 있으면 숨기기
        }
     },
     
     //닫기 버튼 눌렀음
     closePopup() {
        this.setCookie("todayCookie", "done", 1); //쿠키 설정 (쿠키명,쿠키값,쿠키시간)
        this.floatingInfo = false; //닫아줍니다
     },
     
     //쿠키 설정하기
      setCookie(name, value, expiredays) {
      
        //하루설정
        let todayDate = new Date();
        todayDate.setDate(todayDate.getDate() + expiredays);

        //테스트 1분용
        var date = new Date();
        date.setTime(date.getTime() + 1 * 60 * 1000); //1분 설정 

        document.cookie =
          name +
          "=" +
          escape(value) +
          "; path=/; expires=" +
          todayDate.toGMTString() + //여기 변수명만 바꿔서 테스트할 수 있다
          ";";
      },



}

 

 

일단 콘솔에 오늘하루 보지않기를 클릭 한 후, 

1분 이후 값을 출력했다.

이렇게 정상적으로 출력되지만 한번 더 확인이 필요하다

 

 

애플리케이션 > 쿠키 섹션에 들어가면

정상적으로 1분뒤까지 설정되어있는 쿠키를 확인할 수 있다.

이런 확인방법으로 하루뒤 날짜도 제대로 입력되어있는지 체크해주면 된다!

 

 

 

 

+) 쿠키 가져오기

const getCookieValue = (name) => (
  // name : 찾을 쿠키명
  return document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || ''
)

getCookieValue('joeun') //joeun 명칭의 쿠기값이 반환된다