logo标签列表

如何在JQuery中存储全局变量？

javascriptjqueryhtmlcsscookies
3

首先，我想说我有一个网站，希望在不重新加载页面的情况下更改语言。因此，我插入了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 cookies解决？

需要cookie或localStorage。 - charlietfl
4个回答
2
是的 - 每次页面加载都会产生一个新的JavaScript作用域。如果您需要在页面之间保持任何状态，您需要使用cookie或在页面之间附加一些内容到URL上。（即使使用服务器端组件，通常也需要使用客户端标识符来保持与服务器相关联的会话ID。） https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API 也可能会引起兴趣。
1
你可以在客户端使用查询字符串来实现这一点。你可以像这样将查询字符串附加到url的末尾：
?lang=en

然后在您的JavaScript中，您可以解析查询字符串并相应处理。虽然有很好的库用于解析查询字符串（像这样），但这里是一个非常简单的JS代码片段，它将获取查询字符串。但是，如果只有一个查询字符串，这才有效。如果您计划在未来使用更多的查询字符串，则需要实现更好的方法。

var language = location.search.replace(/^.*?\=/, '');
1
为了跟踪当前语言环境，最佳实践是在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 */);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

谢谢您的回答，但我不知道如何集成它，还是需要做出一些改变吗？ - MasterEpik
你需要将它放入你的应用程序中，我认为没有错误...当你想要改变语言环境时，你需要调用I18nService.setCurrent('de');这是一个单例、自动加载的类...我希望这就是你所需要的！ - Hitmands
请告诉我一些关于这段代码的信息，它是否正常工作？@Jesse，“双感叹号”是什么意思？ - Hitmands
用户可以在需要时切换语言！ - Jesse
0

你可以禁用按钮以防止重新加载页面，因为你不需要重新加载这个页面。

$('.language').click(function(e){
($('html').toggleClass('de en'));
     e.preventDefault();  
    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接