记住HTML中用户区域设置选择的最简单方法

Question

I've been working on a website of mine for about a week now. I'm very good with HTML and CSS, but I'm still trying to wrap my head around Javascript, JQuery and PHP.

Basically, what I'm trying to do is create a way if remembering the users language and locale based on their selection on a language selection page. What I'd like (if possible), is for a user to select their flag on a /locale page and make that change the url of the homepage (ie. mysite.com/en-us ). I'm going to be translating my website content via static pages, not active translation.

This only has to work for the homepage, not subsequent pages, however it would be awesome if it did work for pages under different directories too. You can view a live example of my newly constructed website here .

I'd prefer Javascript or JQuery, but honestly - when someone else is doing the hard part, I don't really have the right to be picky.

Thank everyone very much in advance for any assistance.

Answer 1

There's two ways to achieve this: Cookies or localStorage. The easiest one is localStorage :

Here's two plain Javascript functions. The first runs onbodyload and check if the previous language choice (stored in the localStorage) was Spanish. If not (or blank), the welcome appears in English.

When you click a button, it runs the second function which changes the welcome language plus stores the choice in the localStorage.

HTML

<button onclick="language('en')">english</button>
<button onclick="language('spa')">spanish</button>

<h1><span id=welcome>text</span></h1>

JAVASCRIPT

document.getElementsByTagName("body")[0].onload=function(){session()};

function session() {    
var result = localStorage.getItem("session");

if (result === 'spa') {
    document.getElementById("welcome").innerHTML = "Hola!";
} else {
    document.getElementById("welcome").innerHTML = "Hello!";
}
}

function language(key) {
if (key === 'en') {
    document.getElementById("welcome").innerHTML = "Hello!";
    localStorage.setItem("session", "en");
} else if (key === 'spa') {
    document.getElementById("welcome").innerHTML = "Hola!";
    localStorage.setItem("session", "spa");
}
}

Codepen DEMO