I am looking to implement language change functionality in my application by clicking on the language name. I am currently using vuex-i18n to manage the language settings in the frontend. However, I have encountered an issue with localStorage not functioning properly in Firefox (version 57). This issue does not occur in Chrome or Edge (I have verified that dom.storage.enabled is set to true in the config). Here is a snippet of my component code:
<template>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
...
</div>
</nav>
</template>
<script>
import 'vue-awesome/icons';
import {HTTP} from '../common/http-common';
export default {
props: ['topNavbarOptions'],
data: function () {
return {
menuclicked: false
}
},
created: function() {
this.$i18n.set(localStorage.getItem("locale"));
},
methods: {
OpenMenu: function(menuclicked) {
this.menuclicked = !menuclicked;
this.$emit('openmenu', this.menuclicked);
},
setLanguage: function(locale) {
HTTP.get('lang/' + locale)
.then(response =>{
//Set locale from backend
localStorage.setItem("locale", locale);
})
.catch(error=>{
console.log(error);
});
}
}
}
</script>
In addition to using axios for my HTTP calls, I am exploring alternative ways to handle language switching without relying on localStorage or sessionStorage. Are there any changes I can make to my code to ensure compatibility with Firefox?
Thank you for your assistance.