Question

I have one html page, index.html for language selection (simple black overlay with 2 language links), which acts as the page user always goes to unless adding /EN or /CN to the address, then each link links to a different html file, EN.html and CN.html.
Does anyone know how to create a cookie so that the first time someone visits my site, s/he’ll go normally to the language selection index.html, select the language, create a cookie to remember the selection, then in subsequent visits completely skip index.html and go straight to either http://www.mywebsite.com/EN or http://www.mywebsite.com/CN, even if s/he types in “www.mywebsite.com”?
I read a tutorial on this site in creating a cookie that remembers language selection, which basically boils down to the JQuery cookie plugin, and a script like this:

$(function () {

var url = 'your_url';
var en_page = 'en.html';
var cn_page = 'cn.html';

if ($.cookie('default_page') != null) {
    if (window.location.href != url + '/' + $.cookie('default_page')) {
        window.location.href = url + '/' + $.cookie('default_page');
    }
}

$('#set_en_button').click(function () {
    $.cookie('default_page', en_page, { expires: 999 });
});

$('#set_cn_button').click(function () {
    $.cookie('default_page', cn_page, { expires: 999 });
});

});

But I think this only works if the language selection page is the same html file as one of the languages? What the language selection page is a separate page?
Thanks.

Answer 1

You can go about this problem in two ways. The more reliable, but more complicated way is to clear the cookie whenever you click a link to navigate back to the homepage. Example:

<a href="index.html" class="return-link">Back Home</a>
<script type="text/javascript">
$(function() {
    $('.return-link').click(function(e) {
        $.removeCookie('default_page');
    });
});
</script>

This solution is not ideal because:

• it’s hard to maintain as you add more links back to your homepage throughout your site

The more elegant solution is to just alter your homepage code and use the document.referrer property. This property holds the last page visited prior to arriving on the current page. Using this knowledge, you can alter your code to read:

$(function () {

var url = 'your_url';
var en_page = 'en.html';
var cn_page = 'cn.html';

// if the last page you visited has the same hostname
// as the index page, (eg. www.domain.com == www.domain.com)
// you must be coming from a page on your own site
// therefore clear the existing cookie
if (document.referrer.host == document.location.host) {
    $.removeCookie('default_page');
}

if ($.cookie('default_page') != null) {
    if (window.location.href != url + '/' + $.cookie('default_page')) {
        window.location.href = url + '/' + $.cookie('default_page');
    }
}

$('#set_en_button').click(function () {
    $.cookie('default_page', en_page, { expires: 999 });
});

$('#set_cn_button').click(function () {
    $.cookie('default_page', cn_page, { expires: 999 });
});

});

This solution is much more scalable because:

• you don’t have to modify any other files

Note: the referrer field may sometimes be null under special circumstances. You will have to research how dependable it is, but I think in this case, it should work almost all of the time.