title: Build multiple language website using jQuery and JSON based methods
body: <p>I'm trying to implement a Multi-language for one website. I prefer to use <strong>client script</strong> for changing the language between <code>English</code> and <code>Traditional Chinese</code>.</p>
  
  <p><strong>For example:</strong></p>
  
  <p>Create a client script to get/set the selected language:</p>
  
  <pre><code>$(document).ready(function() {
    // The default language is English
    var lang = "en-gb";
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
  
  // get/set the selected language
  $(".translate").click(function() {
    var lang = $(this).attr("id");
  
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
  </code></pre>
  
  <p>Then, build multiple languages dictionary to JSON structure:</p>
  
  <pre><code>var arrLang = {
      "en-gb": {
          "HOME": "Home",
          "ABOUT": "About Us",
          "CONTACT": "Contact Us",
      },
      "zh-tw": {
          "HOME": "首頁",
          "ABOUT": "關於我們",
          "CONTACT": "聯絡我們",
      }
  };  
  </code></pre>
  
  <p>Here's my HTML page:</p>
  
  <pre><code>&lt;button class="translate" id="en-gb"&gt;English&lt;/button&gt;
  &lt;button class="translate" id="zh-tw"&gt;Chinese&lt;/button&gt;
  
  &lt;ul&gt;
      &lt;li class="lang" key="HOME"&gt;&lt;/li&gt;
      &lt;li class="lang" key="ABOUT"&gt;&lt;/li&gt;
      &lt;li class="lang" key="CONTACT"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>A part of the code is shown below:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var arrLang = {
    "en-gb": {
      "HOME": "Home",
      "ABOUT": "About Us",
      "CONTACT": "Contact Us",
    },
    "zh-tw": {
      "HOME": "首頁",
      "ABOUT": "關於我們",
      "CONTACT": "聯絡我們",
    }
  };
  
  $(document).ready(function() {
    // The default language is English
    var lang = "en-gb";
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });
  
  // get/set the selected language
  $(".translate").click(function() {
    var lang = $(this).attr("id");
  
    $(".lang").each(function(index, element) {
      $(this).text(arrLang[lang][$(this).attr("key")]);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;button class="translate" id="en-gb"&gt;English&lt;/button&gt;
  &lt;button class="translate" id="zh-tw"&gt;Chinese&lt;/button&gt;
  
  &lt;ul&gt;
    &lt;li class="lang" key="HOME"&gt;&lt;/li&gt;
    &lt;li class="lang" key="ABOUT"&gt;&lt;/li&gt;
    &lt;li class="lang" key="CONTACT"&gt;&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, When I refresh the page or navigate to another page it returns to the original language. 
  Is there any way to keep the selected language even by refreshing the page?</p>
  
  <p>Thank you!</p>