Streaming live at 10am (PST)

Multi-Language with Javascript


#1

Hi everybody,

I am testing a way to build a website with three languages.
I think it could work with a javascript localStorage custom code, unfortunately I dont master javascript enough and don’t really know if my idea is possible at all.
Can someone help me with this?

Basically each page would have three main DIVs, each of which contains the content in one of the languages.
To change the language of the page, a button would « display: block; » the chosen language DIV and « display: none; » the two other DIVs.
The language swap seems to be working well. You can see the test here: http://language-test.webflow.io/

My problem:

For the moment, the initial setting is that the English DIV is shown and the two others are hidden.
So if I change to French and refresh or go to another page, the settings automatically go back to showing the English DIV.

My question:

Is there a way to save the «state» of the hidden and shown DIVs throughout the whole website, so that the English DIV will only reappear if the user clicks the related button?
I had the impression using localStorage could do the trick, but I have no idea how to use this. Is the idea possible at all, and can someone help with the code?

Here is the read-only link of my test website:
https://preview.webflow.com/preview/language-test?preview=06ae9748fbf5be2c10ed48ac3e9a9cd7

And here are the links that made me consider localStorage as a possibility:


Thank you for your help!
Adrien