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

Question

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

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

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

附言访客是陌生人，不是注册用户。我想将 cookie 存储在访问者的浏览器中，而不是数据库中。请帮我提供完整的解决方案。

Answer 1

一般来说，想法是:在链接上设置处理程序，并在单击后将首选版本保存到本地存储中。然后每次用户加载您网站的任何页面时，只需检查 url 是否包含用户之前选择的语言上下文(“en”/“fr”)。如果是 - 什么都不做，用户打开了正确的版本；如果不是 - 将他重定向到以前保存的版本。以下是 Vanilla 方法(未经过适当测试)。您将不得不调整它(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();

另请注意，可能会出现一些问题，具体取决于您在网站上实现语言上下文的方式。您可以自己开始使用我的代码并对其进行调整，或者找其他人来正确完成这项工作。