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

首先我想说我有一个网站，我想在不重新加载页面的情况下更改语言。这就是为什么我插入了EN和DE的按钮。如何在JQuery中存储全局变量？

<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饼干？

来源

2015-10-25 MasterEpik

需要cookie或localStorage – charlietfl

要保持当前的区域设置的痕迹，最好的做法是将其设置在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>

来源

2015-10-25 18:30:28 Hitmands

为什么双重感叹号？ – Jesse

谢谢你的回答，但我不知道如何整合它，还是我必须改变一些东西？ – MasterEpik

你必须把它放在你的应用程序中，我认为没有错误... 当你想改变语言环境，你需要调用I18nService.setCurrent（'de'）; 这是一个单车，自动加载，类... 我希望这是你需要的一切！ – Hitmands

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

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

来源

2015-10-25 18:12:37 ziesemer

您可以在客户端执行此操作的简单方法是使用查询字符串。您可以追加一个查询字符串，以这样的网址的结尾：

?lang=en

然后在你的JavaScript可以解析出查询字符串和相应的处理。虽然有很好的库用于解析查询字符串（like this），但这是一个非常简单的JS，它将抓住查询字符串。这只适用于有一个查询字符串。如果你打算将来使用更多的查询字符串，你将需要更好的实现。

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

来源

2015-10-25 18:29:46

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

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

来源

2015-10-25 20:08:38

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

回答

相关问题