[Vue] 새로고침 시 데이터 유지

Vue는 자바스크립트 레벨에서 데이터를 취급하기 때문에 페이지를 새로고침하면 값이 사라집니다.

 

 

데이터를 새로고침 시에도 유지를 하고 싶다면 localStorage 혹은 sessionStorage를 사용해야 합니다.

 

 

✅ 로컬스토리지(localStorage)

• 사용자 세션 데이터 유지 가능
• 브라우저를 닫았다가 다시 열어도 유지 가능
• 탭을 여러 개 열어도 공유됨
• 삭제될 때까지 지속

 

✅ 세션스토리지(sessionStorage)

• 브라우저 세션 기간 동안만 사용 가능
• 탭이나 창을 닫으면 삭제
• 새로고침을 해도 유지
• 영원한 저장이 필요 없을 경우 사용

 

✏️ 사용 예시

// App.vue

methods: {
  selectCountry(country) {
    this.country = country;
    localStorage.setItem("country", this.country);
    // console.log("현재 저장된 나라 " + this.country);
  },
  selectPlace(place) {
    this.place = place;
    localStorage.setItem("place", this.place);
    // console.log("현재 저장된 장소 " + this.place);
  },
},

부모 컴포넌트에서 데이터를 저장할 때, 스토리지에도 동시에 저장을 해주면 유지가 가능

 

// TranslateView.vue

created() {
  this.country = localStorage.getItem("country");
  this.place = localStorage.getItem("place");
},

자식 컴포넌트에서 데이터를 스토리지에서 가져와 할당해주고 사용