トグルされたクラス名を保存するにはどうしたらいいですか？

Question

私のウェブサイトの言語を切り替える機能を作ろうとしています。 JavaScriptでクラスを切り替えることでこれをやっていますが、ページをリロードしたり別のクラスに移動したりすると元の状態に戻ります。 JavaScriptが行う変更をどのように保存できますか？私はJavaScriptやPHP

Answer 1

あなたは（あなたがブラウザを閉じたときに、それをクリアするかどうかに応じて、またはsessionStorage）localStorageを使用することができ、代わりにtextContentを使用してください。

Answer 2

あなたの質問のsessionStorageについて、実際に使用したい

function langToggle() { 
 
    if (document.getElementById("contenten").className == "show") { 
 
    document.getElementById("contenten").className = "hide"; 
 
    document.getElementById("contentnl").className = "show"; 
 
    document.getElementById("myBtn").value = "Nederlands"; 
 

 
    } else{ 
 
    document.getElementById("contenten").className = "show"; 
 
    document.getElementById("contentnl").className = "hide"; 
 
    document.getElementById("myBtn").value = "English"; 
 
    } 
 
}

.hide{ 
 
\t display: none; 
 
} 
 

 
.show{ 
 
\t display: block; 
 
}

<button id="myBtn" onclick="langToggle()" value="English">change language<i class="fa fa-globe"></i></button> 
 

 
<section id="contenten" class="show"> 
 
    English 
 
</section> 
 
<section id="contentnl" class="hide"> 
 
    Dutch 
 
</section>

（でも、IE8でサポートHTML5の機能を、!!!!）。あなたのページ Loadイベントで、その後

function langToggle() { 
    var isNederlands = document.getElementById("contenten").className == "show"; 
    document.getElementById("myBtn").value = sessionStorage["lang"] = isNederlands ? "Nederlands" : "English"; 

    if (document.getElementById("contenten").className == "show") { 
    document.getElementById("contenten").className = "hide"; 
    document.getElementById("contentnl").className = "show"; 

    } else{ 
    document.getElementById("contenten").className = "show"; 
    document.getElementById("contentnl").className = "hide"; 
    } 

} 

そして..：：お使いの場合にはhttps://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

：この機能の詳細

document.getElementById("myBtn").value = sessionStorage["lang"]; 

Answer 3

あなたはjavascriptで、この目的のためにcookiesまたはsessionStorageを使用することができます。ボタンはあなたが必要とする、value性質を持っていないことを

// Update the display on page load 
document.addEventListener("DOMContentLoaded", showLang); 

function showLang() { 
    // read the last saved language, defaults to 'en' 
    var lang = localStorage.getItem('lang') || 'en'; 
    document.getElementById("contenten").className = lang == 'en' ? 'show' : 'hide'; 
    document.getElementById("contentnl").className = lang == 'nl' ? 'show' : 'hide'; 
    document.getElementById("myBtn").textContent = lang == 'nl' ? 'To English' : "Naar Nederlands"; 
} 

function langToggle() { 
    // read, toggle and update the language in local storage 
    localStorage.setItem('lang', localStorage.getItem('lang') == 'en' ? 'nl' : 'en'); 
    // adapt the display accordingly 
    showLang(); 
} 

注：このような