ユーザーロケールの選択をHTMLで覚えるのが最も簡単な方法

Question

私は約1週間、私のウェブサイトで作業しています。私はHTMLとCSSでとてもうまくいますが、私はまだJavascript、JQuery、PHPで頭を抱えています。

基本的には、言語選択ページでの選択に基づいて、ユーザーの言語とロケールを覚えていれば、私がやろうとしていることがあります。私が望むものは、ユーザーが/ロケールページでフラグを選択し、ホームページのURL（つまりmysite.com/en-us）を変更することです。私はアクティブな翻訳ではなく、静的ページを介してウェブサイトのコンテンツを翻訳するつもりです。

これは、後続のページではなく、ホームページでのみ機能しますが、別のディレクトリ下のページでも機能していれば素晴らしいと思います。新しく構築したウェブサイトhereの実例を見ることができます。

私はJavascriptやJQueryが好きですが、正直言って - 他の誰かが難しい部分をしているとき、私は本当に嫌な権利を持っていません。

ご協力いただきありがとうございます。

Answer 1

これを達成するには、CookieまたはlocalStorageという2つの方法があります。最も簡単なのはlocalstorage：

ここには2つのプレーンなJavascript関数があります。最初はonbodyloadを実行し、以前の言語の選択（localStorageに格納されている）がスペイン語であるかどうかを確認します。そうでない場合（または空白の場合）、ウェルカムは英語で表示されます。

ボタンをクリックすると、ウェルカム言語を変更する2つ目の機能が実行され、選択肢が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