Local Storage , Session Storage의 차이

Local Storage , Session Storage의 차이

 

Local storage와 Session Storage의 가장 큰 차이는 브라우저 종료시 데이터가 사라지냐.

Local Staroage는 관리자가 별도로 데이터를 삭제 해 주지않는 이상 데이터를 계속 가지고 있고

Session Storage는 브라우저 종료시 데이터가 사라진다.

 

 

 

Local Storage

• localStorage는 시간제한이 없고 브라우저가 꺼져도 죽지 않는다. (브라우저를 종료하고 나중에 다시 접속해도 값이 유지가됨)
• 관리자가 데이터를 명시적으로 삭제 시켜줘야만 데이터 삭제가 된다. 
• 탭을 여러개 열어도 공유된다

 

Session Storage

• 브라우저가 열려있는 동안만 데이터가 살아있으며 브라우저 종료시에 데이터도 함께 없어진다.
• 새로고침을 해도 데이터는 유지된다.
• 탭마다 별도의 저장소가 분리 되어 있어 데이터를 공유하지 않는다

 

 

• 페이지 세션은 브라우저가 열려있는 한 새로고침과 페이지 복구를 거쳐도 남아있음.
• 페이지를 새로운 탭이나 창에서 열면, 세션 쿠키의 동작과는 다르게 최상위 브라우징 맥락의 값을 가진 새로운 세션을 생성.
• 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 sessionStorage를 생성.
• 탭/창을 닫으면 세션이 끝나고 sessionStorage 안의 객체를 초기화.

 

 

예제

• setItem : 현재 출처의 세션 Storage 객체에 접근한 후, Storage.setItem()을 사용해 항목 하나를 추가.
• getItem :  항목 조회
• removeItem: 항목 삭제

 

- Login.vue

로그인 성공 시 id 값을 sessionStorage에 저장.

 

        const submit = () =>{
            axios.post("/api/account/login",state.form).then((res)=>{
                store.commit('setAccount',res.data);
                sessionStorage.setItem("id",res.data);
                router.push({path : "/"});
                window.alert("로그인 하였습니다.");
            }).catch(()=>{
            window.alert("로그인 정보가 존재하지 않습니다.");
            });
        }

 

- App.vue

새로고침 시 sessionStrorage를 조회해서 있으면 로그인 상태 유지

  setup(){
    const id = sessionStorage.getItem("id");
    if(id){
        store.commit("setAccount",id);
    }
  }

 

-Header.vue

로그아웃 클릭 시 sessionStorage의 id 값을 삭제

export default {
  name: 'VueHeader',
  setup(){
    const logout = () => {
    store.commit('setAccount',0);
    sessionStorage.removeItem("id");
    router.push({path : "/"});
  }
  return {logout};
}
}