Самый простой способ запомнить выбор языка пользователя в HTML

Question

Я работаю на моем сайте около недели. Я очень хорошо разбираюсь в HTML и CSS, но я все еще пытаюсь обернуть голову вокруг Javascript, JQuery и PHP.

В принципе, я пытаюсь создать способ, если вспомнить язык и локаль пользователей на основе их выбора на странице выбора языка. То, что мне хотелось бы (если возможно), - это указать пользователю свой флаг на странице/locale и сделать это, чтобы изменить URL-адрес главной страницы (например, mysite.com/en-us). Я собираюсь переводить содержимое своего сайта через статические страницы, а не активный перевод.

Это должно работать только на домашней странице, а не на последующих страницах, однако было бы замечательно, если бы она работала и для страниц в разных каталогах. Вы можете просмотреть живой пример моего недавно построенного веб-сайта here.

Я бы предпочел Javascript или JQuery, но, честно говоря, когда кто-то делает тяжелую роль, я действительно не имею права быть придирчивым.

Благодарим всех заблаговременно за любую помощь.

Answer 1

Существует два способа добиться этого: Cookies или localStorage. Самый простой из них: localStorage:

Вот две простые функции Javascript. Первый запускает onbodyload и проверяет, был ли предыдущий выбор языка (сохраненный в 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