Vue.js) cookies + localstorage 사용해서 반복적인 reqeust 방지하기

쿠키와 로컬 스토리지로 반복적인 리퀘스트를 막은 이유는

쿠기는 최대 4kb만 저장이 가능합니다.

게시판이나 여러 이미지 같은 경우 url 등의 값들이 string으로 많이 길어지기 때문에 4kb만으로는 저장이 안되는 경우가 많이 있었습니다.

하여 브라우저 마다 최대 용량이 다르지만 최대 5M까지 저장이 가능한 localstorage을 사용하여 반복적인 request를 막는 기능을 구현해보았습니다.

쿠키의 Expires기능을 이용해서 쿠키가 없어 졌을때만 서버로 부터 데이터를 가지고 오게 하는 것입니다.

참고 코드는 다음과 같습니다. 참고하시길 바랍니다.

async created(){
    if(!self.$cookies.isKey('notice_info')){
      // 쿠키에 공지사항 정보가 없으면 서버에서 받아온다. 쿠키 만료 시간은 1분 30초이다.
      const res = await fetch('/api/notice_info', {
        method: "POST",
        headers:{
          "Content-Type": "application/json",
        },
      });

      const data = await res.json();
      const result = data['result'];

      switch (result) {
        case process.env.VUE_APP_API_SUCCESS:
          //통신성공
          self.noticeInfo = data['notice_info'];
          this.$cookies.remove("notice_info");
          self.$cookies.set('notice_info', "","30min")// 쿠키 기간을 30분으로 지정
          localStorage.removeItem('notice_info');
          localStorage.setItem('notice_info', JSON.stringify(data['notice_info']))
          break;

        case process.env.VUE_APP_API_ERROR:
          //서버 에러일때
          self.$emit('openModal', '서버 불안정', '서버와의 연결이 불안정합니다.')
          break;

        default:
          alert(data)
          break;
      }
    } else {
      self.noticeInfo = JSON.parse(localStorage.getItem('notice_info'))
    }

  },

 

도움 되셨다면 하단의 광고 클릭 한번 부탁드리겠습니다 :)