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

【问题标题】：how to remember clicked href and redirect to it javascript如何记住点击的href并重定向到它javascript
【发布时间】：2017-09-02 22:34:46
【问题描述】：

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

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

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

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

【问题讨论】：

使用cookies/本地存储
您可以在请求的 url 中传递 lang 参数，或者您可以为此创建 cookie
它是注册用户，那么您也可以从注册时获取语言偏好
链接有什么作用？重定向到新页面或触发以所选语言显示单词的 javascript 命令？就您而言，我认为您想记住用户选择的语言设置，因此所有单词都将以该语言显示。 Cookies 是我认为最简单且正确的解决方案。
How do I create and read a value from cookie?的可能重复

标签： javascript jquery html cookies

【解决方案1】：

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

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

【讨论】：

好！但请注意跨浏览器，您的链接实际上应该包含“http://site.com/en”
当我尝试从另一个浏览器转到主页时，我遇到了问题
cookies、storages等与当前浏览器绑定。如果您在新浏览器中打开该页面 - 它对您之前在另一个浏览器中的操作、存储的信息等一无所知。用户必须在新浏览器中重复这些步骤。该库只是为本地 cookie 实现提供了一个接口，它是存储的替代方案。
此外，一些浏览器可以有所谓的“私有”模式。如果由用户激活，则来自页面的密码、cookie 和其他内容不会被存储，这使得整个方法无法正常工作。
检查这些答案，假设另一种（服务器端）方法 - 标头：stackoverflow.com/questions/17803702/…stackoverflow.com/questions/36985812/…

【解决方案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>

【讨论】：