如何在 JQuery 中存储一个全局变量？答案

【问题标题】：How to store a global variable in JQuery?如何在 JQuery 中存储一个全局变量？
【发布时间】：2016-01-24 19:25:19
【问题描述】：

首先我想说我有一个网站，我想在不重新加载页面的情况下更改语言。这就是我插入 EN 和 DE 按钮的原因。

<button lang="de" class="btn btn-primary btn-sm language" >DE</button>
<button lang="en" class="btn btn-primary btn-sm language" >EN</button>

此外，我的 CSS 看起来像这样：

 html.en :lang(de) {
  display: none;
}
html.de :lang(en) {
  display: none;
}

这就是我的 JQuery 脚本：

if ($("html").hasClass('de')) {
  $('html').addClass('de');
}
else{
     $('html').addClass('en');  
}

$('.language').click(function(){
($('html').toggleClass('de en'));


    });

最后是我的html标签：

<html class="">

我的问题是，如果我在一个页面上更改语言，如果我单击指向新页面的链接，它会自动更改回来。我知道我的 JQuery if 函数有问题。但我真的不知道如何解决这个问题。也许使用 JQuery cookie？

【问题讨论】：

需要cookie或localStorage

标签： javascript jquery html css cookies

【解决方案1】：

您可以禁用按钮以防止重新加载页面，因为您不需要重新加载此页面

$('.language').click(function(e){
($('html').toggleClass('de en'));
     e.preventDefault();  
    });

【讨论】：

【解决方案2】：

为了跟踪当前的语言环境，最好的做法是在url中设置它，这种方法允许用户在需要时切换语言！！

如果您无法在 url 上保留语言，您可以考虑使用 WebStorage... 试试这样的：

var I18nService = (function($, storage) {
  var STORAGE_KEY = 'MY_SITE_CURRENTLOCALE';
  function I18nService() {
    $(document).ready(function() {
      this.setCurrent(this.current);
    });
  }
  
  I18nService.prototype.available = ['en', 'de']
  I18nService.prototype.current = (function() {
    var res = this.available[0];
    var previous = this.getStored();
    
    if(previous) {
      res = previous;
    }
    
    return res;
  })();

  I18nService.prototype.getStored = function() {
    return storage.getItem(STORAGE_KEY);
  };

  I18nService.prototype.store = function() {
    storage.setItem(STORAGE_KEY, this.current);
    return this;
  };

  I18nService.prototype.setCurrent = function(newVal) {
    this.current = newVal;
    return this.store().updateClasses();
  };

  
  I18nService.prototype.getCurrent = function() {
    return this.current;
  };

  I18nService.prototype.updateClasses = function() {
    $('html').removeClass(this.available.join(' ')).addClass(this.current);
    
    return this;
  };
  
  return new I18nService();
})(jQuery, window.localStorage.bind(window) /* or sessionStorage, dependes on what you need */);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

谢谢你的回答，但是我不知道如何集成它，还是我必须改变一些东西？
你必须把它放在你的应用程序中，我认为没有错误......当你想更改语言环境时，你需要调用 I18nService.setCurrent('de');这是一个单音、自动加载的类......我希望这就是你所需要的！
让我了解一下代码，它工作正常吗？ @Jesse 什么“双感叹号”？是什么意思？
"用户在需要时切换语言！！"

【解决方案3】：

您可以在客户端执行此操作的一种简单方法是使用查询字符串。您可以将查询字符串附加到 url 的末尾，如下所示：

?lang=en

然后在您的 javascript 中，您可以解析出查询字符串并进行相应处理。虽然有很好的库用于解析查询字符串 (like this)，但这里有一个非常简单的 JS 片段可以抓取查询字符串。这仅在有一个查询字符串时才有效。如果您计划在未来使用更多的查询字符串，您需要实现一些更好的东西。

var language = location.search.replace(/^.*?\=/, '');

【讨论】：

【解决方案4】：

是的 - 每次页面加载都会产生一个新的 JavaScript 作用域。如果您需要维护页面之间的任何状态，则需要使用 cookie 或在页面之间的 URL 上附加一些内容。（即使使用服务器端组件，通常也需要客户端标识符来保留会话 ID，以便服务器与之关联。）

https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API 也可能感兴趣。

【讨论】：