[Vue.js] js-cookie 모듈 써서 '오늘 하루 보지 않기' 만들기

새로운 언어는 어렵지만 도전정신을 줌

현재 프로젝트는 TypeScript와 Vue.js가 Nuxt와 함께 돌아가고 있는 프로젝트이다

 

1도 모르지만 요즘 열심히 하고 있다.

나름 하면 할수록 재미있음ㅎㅎ

 

그리고 오늘은 제목그대로 로그인 창에서 모달 팝업을 띄워서 [오늘 하루 보지 않기]를 성공했다..!

<div class="browser-pop_bottom">
    <div class="browser-bottom_left">
      <input
        id="Chkbox"
        type="checkbox"
        class="today-btn"
      ><label
        for="Chkbox"
        @click="checkModalToday"
      >오늘 하루 그만보기</label>
    </div>
    <div class="browser-bottom_right">
      <label @click="closeModal">닫기</label>
    </div>
</div>

오늘 하루 보지 않기 체크박스와 닫기가 있는 모달창의 하단 부분

 

checkbox를 눌릴 때 click 이벤트로 checkModalToday를 타게 했다

<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator';
import cookie from 'js-cookie';

@Component
export default class BrowserPopup extends Vue {
    
  checkModalToday(){
    this.setCookie( 'bPop','Y',1 );
    this.closeModal();
  }

  setCookie( key, value, expireDays ){
    cookie.set( key, value, {
      expires: expireDays,
      path: ''
    } );
  }

  @Emit( 'close' )
  closeModal(){
    return false;
  }
}
</script>

js-cookie라는 모듈인데, jQuery에 비하면 진짜 너무 쉽다

한글로 제대로 나와있는 페이지를 못찾아서

https://github.com/js-cookie/js-cookie

GitHub - js-cookie/js-cookie: A simple, lightweight JavaScript API for handling browser cookies

깃허브를 가봤는데.. 뭐 설명이고 자시고 할 게 없었다;;;

 

걍 아주 쉽게 import 하고 set, get 때리면 끝이다.

cookie.set(key, value);

expires 며칠인지를 넣고 싶으면 date 계산하고 할 것 없이 걍 날짜만 넣어주면 됨(ex 하루 = 1, 일주일 7)

path나 그 외 인자를 넣고 싶으면 걍 세 번째 파람으로 넘기면 된다;; 넘 쉽쥬

cookie.set(key, value, {

    expires: 1,

    path: ''

});

 

그리고 로그인 페이지에서

  mounted() {
    this.getEncodeData();
    // this.showAlert();
    this.checkCookie( 'bPop' );
  }

  checkCookie( name ){
    if( cookie.get( name ) !== 'Y' ) this.showModal( 'browserPopup' );
  }

마운트 될 때에 쿠키가 있는지 찾아본다

cookie.get(key);

만약 key로 된 값이 있으면 value를 반환하고, 없으면 undefined를 반환함

 

 

 

하하하