如何在expressJS中维护语言的变化状态

Question

我正在使用nodeJs,handlebars和expressJs框架开发一个项目.我使用i18n-express模块添加更改语言功能.当我们要更改语言时,此模块在url的末尾添加查询字符串.现在的问题是,当我将一个页面移动到另一个页面时,查询字符串被删除并失去他的状态.那我怎样才能保持语言状态？如果用户选择法语,则所有页面均以法语打开.这就是我要的.

码:

var i18n =  require("i18n-express");

app.use(i18n({
  translationsPath: path.join(__dirname, 'lang'), // <--- use here. Specify translations files path.
  siteLangs: ["ar","en","cn","fr","ge","he","hu","it","ja","ko","es","ru"],
  cookieLangName : 'ulang',
  textsVarName: 'translation'  
}));

链接以更改语言

<a href="#!" id="{{icon}}" onclick=" return changeLanguage(this)"></a>

Onclick功能可以改变语言

function changeLanguage(event){
   $('#languages img').attr('src','/images/flag-icons/'+event.id+'.png');
   var url = window.location.href;
   url = url.split("?")[0];
   url += '?clang='+event.id;
   window.location.href = url;
   localStorage.setItem("clang", '?clang='+event.id); //event.id returns locale name such as en, ar, sp, fr etc.
   //console.log(url);
}

Answer 1

我向您推荐ExpressJS 的 Lingua

基本上，Lingua它是 Express.js 的中间件，可帮助您轻松国际化您的 Web 应用程序。它确定用户代理的语言并将 i18n 资源推送到您的视图。

$ npm install -s lingua

var express = require('express'),
    lingua  = require('lingua');

// Express app configuration code and lingua init.
app.configure(function() {

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

// Lingua configuration
app.use(lingua(app, {
    defaultLocale: 'en',
    path: __dirname + '/i18n'
}));

app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.static(__dirname + '/public'));
app.use(app.router);

语言文件

'./i18n/en.json' and './i18n/de-de.json').

// en.json
    {
        "title": "Hello World",
        "content": {
            "description": "A little description."
        }
    }

// de-de.json
    {
        "title": "Hallo Welt",
        "content": {
            "description": "Eine kleine Beschreibung."
        }
    }

您可以通过以下方式轻松在您的页面上实现它：

<h1><%= lingua.title %></h1> <!-- out: <h1>Hello World</h1> -->
<p><%= lingua.content.description %></h1> <!-- out: <p>A little description.</p> -->

Answer 2

在客户端，如果您能够在本地存储上设置一个项目，那么您也可以获取相同的项目并使用其值将其推送到查询字符串。因此，您基本上需要在客户端 JavaScript 上添加一个附加函数，以便在每次页面打开时获取该项目。

    function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    function checkLanguageFromLocalStorage(){
        var clang = getParameterByName('clang');
        if (clang == null) {
            if (localStorage.getItem("clang") != null) {
                var clang = localStorage.getItem("clang");
                var url = window.location.href;
                url = url.split("?")[0];
                url += '?clang='+clang;
                window.location.href = url;
            }
        }
    }

    checkLanguageFromLocalStorage();