CODEWITHSUNDEEP
javascriptjqueryhtmlcookies
Jefathey
Jefathey

Reputation: 33

how to remember clicked href and redirect to it javascript

My home page has a couple of links: one for English version and the other for French version. Something like this:

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

I want to use JavaScript to remember the last choice made by visitors and when they come again, they don't have to choose the language one more time because I want them to be autoredirected to the preferred language using cookies.

P.S. the visitors are strangers, not registered users. I want to store cookies in visitors' browsers, not in the database. Please, help me by providing me with the full solution.

Upvotes: 3

Views: 642

Answers (2)

curveball
curveball

Reputation: 4505

Gelerally, the idea is: set handlers on links and upon clicking save preferred version into localStorage. Then every time user loads any page of your site, just check, whether the url contains the language context ("en"/"fr") the user chose before. If yes - do nothing, user opened the right version; if not - redirect him to the previously saved version. The following is a Vanilla approach (not properly tested). You will have to tweak it (attachEvent etc.) or use jQuery library to implement similar ideas in a shorter and more cross-browser way.

<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();

Also notice, that there may be issues depending on how you implement language contexts on your site. You can start with my code on your own and tweak it or find someone else to get this properly done.

Upvotes: 1

M. Waheed
M. Waheed

Reputation: 907

Just tested this, it works perfect.

<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>

Upvotes: 1

Related Questions