Question

我的主页有几个链接：一个用于英文版，另一个用于法文版。像这样：

<a class="ensite" href="/en">English</a>
<a class="ensite" href="/fr">French</a>

我想使用JavaScript来记住访问者的最后选择，当他们再来时，他们不必再次选择语言，因为我希望他们使用cookie自动导向到首选语言。

P.S。访客是陌生人，不是注册用户。我想在访问者中存储cookie＆＃39;浏览器，不在数据库中。请帮我提供完整的解决方案。

Answer 1

Gelerally，其想法是：在链接上设置处理程序，然后单击将首选版本保存到localStorage。然后，每当用户加载您网站的任何页面时，只需检查该网址是否包含用户之前选择的语言上下文（＆＃34; en＆＃34; /＆＃34; fr＆＃34;）。如果是 - 什么都不做，用户打开了正确的版本;如果不是 - 将他重定向到以前保存的版本。以下是香草方法（未经适当测试）。您将不得不调整它（attachEvent等）或使用jQuery库以更短和更跨浏览器的方式实现类似的想法。

<a class="ensite" href="/en">English</a>
<a class="ensite" href="/fr">French</a>

JS：

function LanguageManager(selector) {
    this.langLinks = document.querySelectorAll(selector);
}
LanguageManager.prototype.setHandler = function() {
    var self = this;
    this.langLinks.forEach(function(langLink) {
        langLink.addEventListener("click", self.handler, false);
    });   
}
LanguageManager.prototype.redirect = function() {
    var link = storageManager.restoreDataFromStorage();
    if(link && !~window.location.href.indexOf(link)) window.location.href = link;
}
LanguageManager.prototype.handler = function() { 
    var e = event || window. event;
    var elem = e.target || e.srcElement;
    if(e.preventDefault) e.preventDefault(); else e.returnValue = false;
    storageManager.saveDataToStorage(elem.href);
    location.href = elem.href;
}
function StorageManager() {
    this.storageName = "languageVersion";
    this.storageData = null;
}
StorageManager.prototype.isStorageAvailable = function(type) {
  try {
    var storage = window[type], x = '__storage_test__';
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch(e) { return false; }
}
StorageManager.prototype.saveDataToStorage = function(data) {
    if(!this.isStorageAvailable('localStorage')) { 
        this.storageData = data; 
          return false;
  }
    try {
        localStorage.setItem(this.storageName, JSON.stringify(data));
        return this.storageName; 
    } catch(e) { 
        this.storageData = data; 
        return false;
    }
}
StorageManager.prototype.restoreDataFromStorage = function() {
    if(this.storageData) return this.storageData;
    return JSON.parse(localStorage.getItem(this.storageName));
}
var storageManager = new StorageManager();  
var languageManager = new LanguageManager(".ensite");  
languageManager.setHandler();
languageManager.redirect();

另请注意，根据您在网站上实施语言上下文的方式，可能会出现问题。您可以自己开始使用我的代码并进行调整或找到其他人来完成这项工作。

Answer 2

刚刚测试过，它完美无缺。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<a class="ensite" href="" onclick ="localStorage.setItem('language','en')">English</a>
<a class="ensite" href="" onclick = "localStorage.setItem('language','fr')">French</a>

<script>

$(document).ready(function(){

var language =  (localStorage.getItem('language') == null)? 'en' : localStorage.getItem('language');

console.log(language);
})

</script>

如何记住点击的href并重定向到它javascript

2 个答案: