带有 i18next 的多语言网站。 记住语言选择

Question

I'm building a multi-language website. The problem is that the language selection is not memorized when reloading the page.

My webpage consists of one landing page and some other pages with additional information. I would like that the language choice is remembered and applied also when loading the other pages. Link to my page: https://merry-sprite-2d2487.netlify.app/index.html

To implement the multi language I used this guideline and basically the same code: https://idesignzone.com/how-to-create-a-multilingual-website-in-html/#comment-48

I'm pretty new to coding and just learned it to create my site. If answering please keep it simple and easy;) Thank you!

I tried to replace lng: "eng" with lng: localStorage. getItem(key) || "eng" as was suggested in another post but then it didn't load anything.

Answer 1

you have 3 choices:

initially, you detect navigator language and you store it using the choice you'll make in the way of storing. And you update this value, same way, each time user choose another language.

At page loading, first thing you read the value, if nothing you detect navigator language and store it

• cookie
• localStorage
• URL, adding en=XX after the #

I won't describe all the ways, you can find a lot on each easily in searching.

But pro and cons (my opinion only, certainly other people can have other opinions)

cookie pros

• easy to use
• not visible by user cookie cons
• can have strange behaviour with certain browser
• normally, if european union you have to make a box message at beginning saying you are using cookie, and user has to agree

localStorage pros

• easy to use
• not visible by user localStorage cons
• almost nothing

URL pros

• it's visible: you, user and SEO see it URL cons
• it's visible (hehe): user see it
• it's harder to implement, not a lot but harder