Change html language with a button and save after refreshing the page

Question

I was wondering how to save the html language on a website after reloading the page. I created a couple of language buttons, here's one example:

<a onclick="changeLang('pt')" href="#" title="Portugese" data-lang="Portugese">
   <div class="flag pt">Portugese</div>
</a>

And a bit of code in my JS file:

const changeLang = (languageCode) => {
  document.documentElement.setAttribute("lang", languageCode);
};

How can I make sure the language stays Portugese after clicking the button?

Thank you for your help in advance!

Have you tried to store the language code in a cookie? Maybe in the sessionStorage — CcmU
– CcmU, Commented Jan 20, 2022 at 10:36
Write a cookie with the language code when you set it, and then read in the code from the cookie when you reload the page. — Andy
– Andy, Commented Jan 20, 2022 at 10:37
Does this answer your question? Keep the selected color by clicking even after reload the page using Javascript — evolutionxbox
– evolutionxbox, Commented Jan 20, 2022 at 10:37

Milan Mijatovic · Accepted Answer · 2022-01-20 10:43:57Z

2

There are few option, in my opinion best approach is to have different url for different language (domain.com, domain.com/pt, domain.com/fr) which is good for SEO. You can also save language in cookie with javascript and then on page load fetch current language from cookie, check here how to set and fetch cookie.

answered Jan 20, 2022 at 10:43

Milan Mijatovic

1565 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change html language with a button and save after refreshing the page

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related