Question

我想通过单击语言名称来更改语言，我使用vuex-i18n在前端设置语言。我正在使用localStorage但是localStorage不能在firefox中工作，我在Firefox 57中测试，我在Chrome和Edge中测试并且在那里工作但不在firefox中。（我已经检查了配置和dom.storage.enabled是真正）我的组件代码是：

<template>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand"  id="menu-toggle" @click ="OpenMenu(menuclicked)"><span class="glyphicon glyphicon-list" aria-hidden="true"></span></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="" @click="setLanguage('en')" >English</a></li>
                <li><a href="" @click="setLanguage('es')"> Spanish</a></li>

                <li v-for ="item in topNavbarOptions"><router-link v-on:click.native="item.clickEvent" :to="{name:item.route}"><span :class="item.icon"></span> {{ item.name}}</router-link></li>

            </ul>
        </div>
    </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>

我在HTTP调用中使用了axios。有一种方法可以在不使用localstorage或sessionstorage的情况下设置语言吗？我必须在代码中更改以与Firefox兼容？

谢谢。

Answer 1

你试过window.localStorage吗？这应该是背景和范围不可靠的。

Answer 2

尝试

在设置中删除此网站的本地存储空间。 URL =约：偏好＃隐私
关闭FF
重启FF

它适用于我的情况 - 我已更新到第57版 - 不知何故我的个人资料已损坏在Windows中，FF配置文件位于： C：\用户[youraccountname] \应用程序数据\本地\ Mozilla的\火狐\概况\

Answer 3

我不得不改变我的代码来解决问题。问题是当LocalStorage在axios http响应中时（setLanguage方法）它适用于Chrome但在firefox中LocalStorage是空的。当我将LocalStorage移动到响应之外时它会起作用。

<script>  
import  'vue-awesome/icons';
import {HTTP} from '../common/http-common';  
export default {
    props:['topNavbarOptions'],
    data: function () {
        return {
            menuclicked: false,
            locale:'en'

        }
    },
    mounted:function(){

      if(localStorage.getItem("locale"))
        {
          this.locale = localStorage.getItem("locale");
        }
           this.$i18n.set(this.locale);

   },
    methods: {
        OpenMenu: function (menuclicked) {
            this.menuclicked = !menuclicked;
            this.$emit('openmenu', this.menuclicked );
        },
        setLanguage:function(localecode)
       {  
          //Set front end locale
         localStorage.setItem("locale",localecode); 
          //Set backend locale
          HTTP.get('lang/'+localecode)
          .then(response =>{

          })
          .catch(error=>{
          console.log(error);
          });

        }



    }

}
</script>

Answer 4

试试这个：

browser.storage.local.get（） - 检索数据 browser.storage.local.set（） - 发布数据

为什么localstorage不能运行firefox 57和Vuejs2？

4 个答案: