vue-element 的select选中后刷新页面问题

Question

项目中开发中，需要用到语言切换功能，样式用vue-element的select选择器实现。
代码如下如：
<div class="language">

<el-select v-model="value" @change="currentSel">
    <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
    </el-option>
</el-select>

</div>
data() {
return {

options: [{
  value: '简体中文',
  label: '简体中文'
},
{
  value: '繁體中文',
  label: '繁體中文'
}, {
  value: 'English',
  label: 'English'
}],
value: '简体中文'

}
},
methods:{

currentSel(selVal){
    if(selVal === '简体中文'){
        // this.value = selVal
        this.$i18n.locale='zhCHS'
        console.log('切换简体中文');
    }else if(selVal === '繁體中文'){
        this.$i18n.locale='zhCHT';
        console.log('切换繁體中文');
    }else if(selVal === 'English'){
        this.$i18n.locale='en';
        console.log('切换English');
    }
}

}
注释：$i18n在main.js中设置的默认语言是中文简体

以上代码能正常运行，点击切换语言的时候，页面能正常切换不同语言
问题来了，如当切换到英文模式的时候（此时能正常显示英文），然后刷新界面，又会重新回到默认的中文简体模式

请问我要如何能够保存用户切换语言的状态呢，让它不会随界面刷新而重置

可能问的比较小白，但想不通其中该如何操作，望各位大佬不吝赐教，谢谢！
或者提供其它的方式解决

Answer 1

如果想刷新后保留已选择语言，就需要缓存用户缓存语言，这样就需要使用到浏览器缓存了，cookie 和 localStorage 等方案你可以根据自己需要选择，然后每次在入口文件 main.js 中初始化的时候，先读取缓存，如果存在，则初始化为缓存值，没有，则设置为默认值。

Answer 2

options: [{
  value: 'zhCHS',
  label: '简体中文'
},
{
  value: 'zhCHT',
  label: '繁體中文'
}, {
  value: 'en',
  label: 'English'
}],
value: 'zhCHS'


created(){
    this.value = this.$i18n.locale
}

Answer 3

https://www.jianshu.com/p/dbe...

Answer 4

进行缓存处理,使用localStorage、sessionstorage等；