如何保存已切换的班级名称？

Question

I'm trying to make a function to toggle the language for my website. I'm doing this by toggling classes with JavaScript, but if I reload the page or go to another it changes back to the original. How can I save the changes that JavaScript makes?

 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{ display: none; } .show{ 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> 

I only want to use JavaScript or PHP

Answer 1

You questions is actually about sessionStorage (html5 feature, supported even on IE8!!!!). More about this feature: https://developer.mozilla.org/en/docs/Web/API/Window/sessionStorage

In your case:

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";
  }

}

And then.. on your page Load event:

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

Answer 2

您可以在javascript中为此使用cookies或sessionStorage 。

Answer 3

You could use localStorage (or sessionStorage , depending on whether you want it to be cleared when the browser closes), like this:

// 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();
}

Note that the button does not have a value property, you need to use textContent instead.