How to save current language (i18n) in localstorage (Vue)

Question

I'm developing an app in Vue using Vue Routers and Vue $i18n plugin.
This is my HTML:

<div class="locale-changer">
  <select v-model="this.$i18n.locale" class="btn">
    <option v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
  </select>
</div>

And my JS:

export default {
  name: "home",
  data() {
    return {
      langs: ['Español', 'English'],
      currentlang: this.$i18n.locale
    }
  },
  mounted() {
    if(localStorage.currentlang) this.currentlang = localStorage.currentlang;
  },
  watch: {
    currentlang(newLang) {
      localStorage.currentlang = newLang;
    }
  }
};

I have already searched the Internet but still cannot get it.
Hope you can help me! Thanks <3

how to save the current language selected by the user in localstorage — NuzzeSicK, Jul 16 '20 at 13:21
It's best practice to use `localStorage.setItem()` and `localStorage.getItem()` for communicating with localStorage. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) — Reyno, Jul 16 '20 at 13:22

score 1 · Answer 1 · answered Jul 16 '20 at 13:25

1

This is the syntax for saving in localStorage:

localStorage.setItem("name", value);

and to get and item:

localStorage.getItem("name")

see here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

answered Jul 16 '20 at 13:25

Tomer

17,787
15
78
137

1

Just a side note, you don't need to use it but it's recommended, [see here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) – Reyno Jul 16 '20 at 13:28

score 1 · Answer 2 · answered Apr 27 '22 at 11:49

add @change event for setting the localStorage / sessionStorage and create mounted() function to load it at the beginning

<template>
  <select @change="updateLanguage()" v-model="$i18n.locale">
    <option v-for="(locale, i) in locales" :key="`locale-${i}`" :value="locale">
      {{ locale.toUpperCase() }}
    </option>
  </select>
</template>

<script>
export default {
  name: "LocaleSwitcher",
  data() {
    return { locales: ["sk", "cs", "en"] };
  },
  methods: {
    updateLanguage() {
      sessionStorage.setItem("locale", this.$i18n.locale);
    },
  },
  mounted() {
    if (sessionStorage.getItem("locale")) {
      this.$i18n.locale = sessionStorage.getItem("locale");
    } else {
      sessionStorage.setItem("locale", this.$i18n.locale);
    }
  },
};
</script>

How to save current language (i18n) in localstorage (Vue)

2 Answers2

Linked