0
231
Vistas¿Cómo guardar una salida de función javascript con almacenamiento local/cookies? o de alguna otra manera?
Tengo un sitio web que está cargado en inglés y he traducido manualmente cada párrafo al francés. Con una función simple cuando hace clic en translate_fr() onclick, todos los párrafos son tomados por sus ID y cambiados a los párrafos en francés almacenados en mis archivos .js. Cuando hace clic en translate_en(), vuelve al inglés. Básicamente, cuando el usuario hace clic en EN o FR, quiero que esa decisión se transfiera a todas las demás páginas, de alguna manera necesito almacenar la salida de esa función y hacer que se ejecute automáticamente cuando ingresen a otra página. Si ingresan a la página de inicio por primera vez y traducen al francés, todas las demás páginas también deben estar en francés.
Dejé un ejemplo de un solo párrafo, aunque si necesita una mejor comprensión aquí está el sitio web en el dominio lionkuts.ca
function translate_en(){ document.getElementById("intro").innerHTML = `Here at Lion Kuts we are a cat only establishment that offers a full range of services from complete grooming, bathing to boarding. You and your pet will be thrilled to know that only professional, natural and biodegradeable products are used, any sensitivities or allergies will not be a problem.`; } function translate_fr(){ document.getElementById("intro").innerHTML = `Chez Coupe Lion, nous ne sommes qu'un chat établissement offrant une gamme complète de services du toilettage complet, de la baignade à l'embarquement.Vous et votre animal sera ravi de savoir que seul un professionnel, des produits naturels et biodégradables sont utilisés, tout les sensibilités ou les allergies ne seront pas un problème.`; } <div class="wrapper3"> <button class="translate" id="click1" type="button"onclick="translate_en()">EN </button> <button class="translate" id="click2" type="button" onclick="translate_fr()">FR </button> </div> <p id="intro"> Here at Lion Kuts we are a cat only establishment that offers a full range of services from complete grooming, bathing to boarding. You and your pet will be thrilled to know that only professional, natural and biodegradeable products are used, any sensitivities or allergies will not be a problem. </p> 
Todas las páginas tienen las dos funciones configuradas de esta manera, solo necesito que las funciones se ejecuten ya sea que se haya tomado la decisión de hacer clic en fr o en en la página de inicio. Si hicieron clic en FR, entonces esa decisión debe almacenarse, y cuando se ejecuta la siguiente página, la función translate_fr se ejecuta automáticamente intercambiando todos los párrafos.
3 Respuestas
Responde la pregunta0
Estás de suerte, la API para esto es muy sencilla (y bien descrita por MDN: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ).
Simplemente almacene su valor en el almacenamiento local con una clave:
localStorage.setItem('your-key', 'your-value')
Y luego obtener el valor como este:
localStorage.getItem('your-key')
Sin embargo, tenga cuidado con la codificación JSON.
/e su ejemplo podría reestructurarse así, en su forma simple:
function translate_en(){ localStorage.setItem('lang', 'en') document.getElementById("intro").innerHTML = `Here at Lion Kuts we are a cat only establishment that offers a full range of services from complete grooming, bathing to boarding. You and your pet will be thrilled to know that only professional, natural and biodegradeable products are used, any sensitivities or allergies will not be a problem.`; } function translate_fr(){ localStorage.setItem('lang', 'fr') document.getElementById("intro").innerHTML = `Chez Coupe Lion, nous ne sommes qu'un chat établissement offrant une gamme complète de services du toilettage complet, de la baignade à l'embarquement.Vous et votre animal sera ravi de savoir que seul un professionnel, des produits naturels et biodégradables sont utilisés, tout les sensibilités ou les allergies ne seront pas un problème.`; } // The moment this script executes, get the previous language selection, if any. // Use it to repeat the users selection by automatically calling the right function // depending on the language the user selected earlier. const selectedLanguage = localStorage.getItem('lang') if (selectedLanguage === 'en') { translate_en() } else if (selectedLanguage === 'fr') { translate_fr() }0
Yo no lo haría de la misma manera pero si quieres mantener tu estructura puedes hacer algo como esto:
function translate_fr() { localStorage.setItem('language', 'FR') document.getElementById("intro").innerHTML = `Chez Coupe Lion, nous ne sommes qu'un chat établissement offrant une gamme complète de services du toilettage complet, de la baignade à l'embarquement.Vous et votre animal sera ravi de savoir que seul un professionnel, des produits naturels et biodégradables sont utilisés, tout les sensibilités ou les allergies ne seront pas un problème.`; } function translate_en() { localStorage.setItem('language', 'EN') document.getElementById("intro").innerHTML = `Here at Lion Kuts we are a cat only establishment that offers a full range of services from complete grooming, bathing to boarding. You and your pet will be thrilled to know that only professional, natural and biodegradeable products are used, any sensitivities or allergies will not be a problem.`; } const language = localStorage.getItem('language') if(language === 'FR') { translate_fr() }0
Respondo más a la parte sobre la traducción del contenido, ya que normalmente lo haría utilizando un objeto de contenido separado. En este objeto almacenas todo el contenido y con un framework js o vanilla js, lo inyectas en un párrafo específico. Es un enfoque más escalable, ya que también puede agregar fácilmente de o cualquier otro idioma al objeto, sin cambiar la lógica. Un pequeño ejemplo de cómo funcionaría esto:
const content = { en: { welcome: 'hi welcome on our website', body: 'a beautiful sentence' }, fr: { welcome: 'bonjour, bienvenue sur notre site', body: 'une belle phrase' }, }; let currentLanguage = 'en' // or localStorage.getItem('locale') const updateContent = (elem, msg) => elem.innerHTML = msg; const handleLocalization = (locale) => { currentLanguage = locale; // and update localStorage // localStorage.setItem('locale', locale); updateContent(document.querySelector('#my-welcome-message'), content[currentLanguage].welcome); updateContent(document.querySelector('#my-body-message'), content[currentLanguage].body); } document.querySelector('#toggle-language').addEventListener('click', () => { handleLocalization(currentLanguage === 'en' ? 'fr' : 'en'); }) updateContent(document.querySelector('#my-welcome-message'), content[currentLanguage].welcome); updateContent(document.querySelector('#my-body-message'), content[currentLanguage].body); <p id="my-welcome-message"></p> <p id="my-body-message"></p> <button id="toggle-language">toggle language</button>