[vue.js] 다국어 로컬스토리지 저장 - i18n

 

안녕하세요👏

 

 

 

 

 

 

이번에는 다국어 설정에 이어서 로컬스토리지에 저장하는 코드로 변경해보도록 하겠습니당☺️

 

 

 

[vue.js] 다국어 적용하기 - i18n

 

 

 

기존의 버튼으로 클릭시 변경되는거외에 선택 박스로 다국어 변경시에 로컬스토리지에 함께 저장되어 다른 페이지 이동 혹은 새로고침을 해도 기존 언어로 돌아가지 않게 합니다!

 

 

// Test.vue

<template>
	<div>
    	<h1> 다국어 적용 테스트 </h1>
        <p> {{ $t('titleCd') }} </p>
        <p> {{ $t('bananaCd') }} </p>
        <button @click="$i18n.locale='ko'"> 한국어 </button>
        <button @click="$i18n.locale='en'"> 영어 </button>
        
        <select v-model="$i18n.locale" @change="setLocalStorage">
        	<option v-for="(lang, i) in lang" :key="Lang$(i)" :value="lang"> {{ lang }} </option>
        </select>
    </div>
</template>

<script>
export default {
	data() {
    	return {
            langs: ["ko", "en"]
        },
        methods: {
        	setLocalStorage() {
            	localStorage.setItem("lang", this.$i18n.locale)
            }
        }
    }
}
</script>

 

셀렉트 박스는 v-for를 사용하여 data에 있는 언어만큼의 옵션을 자동으로 추가해줍니다.

그리고 변경 되는것을 감지하여 @change를 사용하여 선택된 언어 값을 localStorage에 lang값으로 저장해줍니다. 

 

 

 

 

 

// i18n.js

import { createI18n } from 'vue-i18n'  
import ko from '@/locales/ko.json'
import en from '@/locales/en.json'

export const i18n = new createI18n({
    locale: localStorage.getItem("lang") || "ko",
    fallbackLocale: "en",
    messages: {
        "ko": ko,
        "en": en
    }
})

 

i18n을 설정해준 파일로 돌아가서 locale에 로컬스토리지에 저장된 값을 넣어줍니다.

로컬스토리지에 lang으로 들어온 값이 있으면 해당 값으로 표시해주고 없다면 기본언어인 한국어로 표시합니다. 

 

 

 

 

이렇게 vue를 실행하면 로컬스토리지에 값이 없기때문에 기본 설정언어인 한국어로 표시가 됩니다.

 

 

그리고 셀렉트박스로 ko를 선택하여 콘솔에 localStorage로 lang값을 확인하면 ko로 들어와진 것을 확인 할 수 있습니다!

 

 

 

 

 

한국어로 설정하여 콘솔에 로컬스토리지에 저장된 값 확인

 

 

 

다음은 셀렉트박스로 영어를 선택한 화면입니다.

 

 

영어로 변경하여 콘솔에 로컬스토리지에 저장된 값 확인

 

 

 

이렇게 다국어 지원이 가능한 페이지로 가능해졌습니당!ㅎㅎ