Vue 새창 띄우기에서 Session storage 그대로 유지하기

안녕하세요.

Vue.js로 개발을 다 하고 나서 테스트를 하다보니 백스페이스나 새로고침을 하고나면 값들이 초기화 되버리는 상황이 발생하게 되었습니다.

새로고침을 해도 store를 유지할 수 있게 vuex-persistedstate 적용하였지만 문제가 하나 발생했습니다.

uxgjs.tistory.com/207

vuex-persistedstate 덕분에 Vue.js 화면을 새로고침 해도 안전해요.

 

제가 만든 site는 login 기능이 있어서 로그인 상태에서 브라우저를 닫았다 다시 접속하면 로그인 session이 풀려야 하는데, local storage를 사용하니 브라우저를 닫았다 다시 열어도 로그인된 상태 그대로 유지가 되는 것이었습니다. 

 

이를 해결하기 위해 vuex-persistedstate 의 storage option에서 window.sessionStorage를 선택하여 vuex.store 를 session storage에 저장하도록 변경하였습니다.

 

그리고 나서 site 편의성을 위해 새창 띄우기를 추가한 뒤 최근 또 하나의 문제를 발견하게 됩니다. 새창에서 vuex.store가 초기화 되는 문제였습니다. 예전에는 분명히 그대로 복사가 잘 되었었는데 최근 크롬 업데이트 후 부터 막혀버렸습니다.

 

이번에는 다음처럼 해결하였습니다. 컨셉은 간단합니다. 바로 새창 띄우기에서 잠깐 session storage에 있는 vuex.store를 local 로 복사한뒤 새창에서 다시 local > session 으로 복사해 주는 방법입니다.

코드는 아래와 같습니다.

1. store.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.store({
  plugins: [
    createPersistedState({
      storage: window.sessionStorage // store를 session storage 에 유지
    })
  ],
  state: { ..... },
  mutations: { ...... },
  actions: { ...... },
  getters: { ...... }
})

 2. App.vue

<template>

</template>

<script>
  export default {
    methods: {
      새창 () {
        localStorage.setItem('vuex', sessionStorage.getItem('vuex')) // vuex session to local
        ...
      }
    },
    beforeCreate () {
      let localVuex = localStorage.getItem('vuex') // local storage에 vuex 저장여부 확인
      if (localVuex) { // 저장되어 있는 경우 session storage로 이동 후 local 제거
        localVuex = JSON.parse(localVuex)
        this.$store.commit('setXXX', localVuex.xxx)
        localStorage.removeItem('vuex') 
      }
    }
  }
</script>

 

위 현상을 해결하려고 엄청 고민했는데 해결 방법은 생각보다 간단했습니다. :)

 

다시 한번 정리해 보자면 다음과 같습니다.

* store 유지를 위해 브라우저의 storage를 사용하는 경우 두가지 선택이 있음. > local storage 또는 session storage 

* 창 닫기 때 store 를 초기화 하려면 session storage를 사용해야 함.

* session storage를 사용하면 새창 띄우기에서 새로 session을 복사해야 함.

* local storage에 session storage를 잠시 copy 후 새창에 store 복사 후 local stroage는 삭제. 

 

감사합니다.