[sample coding] vue.js 탭 기억 - local & session Storage

js tab remember (with vue.js)

👀 브라우저 새로고침, 혹은 다시 페이지에 진입시 사용자가 선택했던 탭을 기억해야하는 경우가 있다.
브라우저 단위로 기억해야한다면 Session Storage를,
기기단위로 기억해야한다면 Local Storage를 사용하면 된다.

❗️ 참고 MDN - sessionStorage

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

👀 예제 코드

❗️ 참고사항

• $_메소드명 --> private

• localStorage를 사용하고 싶으면 sessionStorage를 localStorage로만 변경해주면 된다.
• 메소드가 같기때문 (setItem, getItem, removeItem)

// 부모 컴포넌트
<template>
   <child-tab :is-left-tab="isLeftTab" @onSelectTab="onSelectTab" /> 
</template>

<script>
import ChildTab from './ChildTab.vue';

export default {
    name: 'ParentTab'
    
    components: {
        ChildTab, 
    },

    data() {
      // 왼쪽탭이 디폴트이므로 오른쪽탭을 눌렀느냐 여부를 기억해줍니다
        return {
            STORAGE_SCHEMA: 'isRightSelected', // 고정 스키마 - 오른쪽탭 선택여부
            isLeftTab: true, // 왼쪽 탭인지 여부 - 디폴트값 설정
        };
    },

    created() {
      	// 스토리지 init
        this.$_initTabStorage();
    },
      
    methods: {
      	/* event and set tab */
      	$_setTab(isSelectLeft) {
            this.isLeftTab = isSelectLeft;
        },
      	// 탭 클릭시 이벤트 발생
      	onSelectTab(isSelectLeft) {
            this.$_setTab(isSelectLeft);
            // storage Hn - 기억
            this.$_storageHn(isSelectLeft);
        },
          
        /* remember with storage */
        $_initTabStorage() {
            // 스트링으로 저장되므로 스트링값으로 비교
            const isRightSelected = sessionStorage.getItem(this.STORAGE_SCHEMA) === 'true';
            if (isRightSelected) {
                // 일상 클릭상태
                this.$_setTab(false);
            } 
        $_saveStorage() {
            sessionStorage.setItem(this.STORAGE_SCHEMA, true);
        },
        $_removeStorage() {
            sessionStorage.removeItem(this.STORAGE_SCHEMA);
        },
        $_storageHn(isSelectLeft) {
            if (!isSelectLeft) {
                this.$_saveStorage();
            } else {
                this.$_removeStorage();
            }
        },
    },
};
</script>

// 자식 컴포넌트
<template>
  <ul>
     <li>
        <button :class="{ 'is-active': isLeftTab }" @click.prevent="$_onSelectTab(true)">
            왼쪽 탭
        </button>
     </li>
     <li>
        <button :class="{ 'is-active': !isLeftTab }" @click.prevent="$_onSelectTab(false)">
            오른쪽 탭
        </button>
     </li>
  </ul>
</template>

<script>

export default {
    name: 'ChildTab',
      
    props: {
        isLeftTab: {
            type: Boolean,
            default: true,
        },
    },
      
    methods: {
        // 이벤트 전송
        $_onSelectTab(isSelectLeft) {
            this.$emit('onSelectTab', isSelectLeft);
        },
    },
};