I have a translation feature that switches paragraphs from english to french using javascript at the click of a button. Now I manually grabbed each paragraph using innerhtml and everything works fine. When I switch from one page to another if the user already translated that page to french it should carry over to every other page. Though right now when linking to another page it refreshes and reverts back to english forcing the user to keep translating the page every time it refreshed which I DONT want.
Based on how I set up these functions I don't know if its possible to do this now, I basically want one onlick event to translate all the pages, basically don't want this function to refresh when entering another page.
function translate_fr(){
document.getElementById("servicesIntro").innerHTML = `Nous proposons de nombreux services supplémentaires pour votre chat. Lorsque vous réservez avec nous, vous pouvez choisir parmi l'une des options ci-dessous. Si nécessaire, tout ajustement apporté à nos prix sera discuté une fois le rendez-vous pris. Toute autre question ou préoccupation peut être discutée avec nous lorsque vous prenez rendez-vous. N'hésitez pas à nous appeler, nous envoyer un e-mail ou même nous contacter via nos réseaux sociaux pendant nos heures de travail de 9h à 18h du mardi au samedi.`
}<button class="translate" type="button" onclick="translate_fr()">FR</button>
<p id="servicesIntro"><span class="firstWord">We</span> offer many additional services for your cat, when you book with us you can choose from any of the options below. If needed any adjustments made to our prices will be discussed once an appointment is made. Any other questions or concerns can be discussed with us when you book an appointment. Feel free to call, e-mail us or even contact us through our social media during our work hours from 9 A.M to 6 P.M Tuesday to Saturday.
</p>