es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Estableciendo diferentes valores para una variable exportada.

22 Jul, 2023 Programación

Quiero usar diferentes idiomas para los usuarios en mi sitio web sin usar i18n. Actualmente tengo problemas para configurar una variable con diferentes valores provenientes de dos archivos diferentes. La razón es que la variable exportada debe configurarse con un valor al principio e idealmente no se puede cambiar después. ¿Existe alguna manera de transformarla en una variable condicional que se pueda exportar después?

Aquí está mi ejemplo de código:

english.js (archivo)

var lang_eng = {
“administration”: {
“building”: “Administración de Edificios”,
“information”: “Información”,
“registered_user”: “Usuario registrado: “,
“activated_user”: “Usuario activado: “,
“available_roles”: “Roles disponibles: “,
“administrator”: “Administrador: ”
}
german.js (archivo)

export var lang_de = {
“user_administration”: {
“building”: “Administración de Edificios”,
“information”: “Información”,
“registered_user”: “Usuarios registrados: “,
“activated_user”: “Usuarios activados: “,
“available_roles”: “Roles disponibles: “,
“administrators”: “Administradores: ”
}
}

Quiero usar el tercer archivo HTML para definir los diferentes idiomas en un botón desplegable.

Actualmente solo puedo cambiar el idioma manualmente con la tercera variable exportada “languageSelector”, que se define como un Hook que deriva las claves de los respectivos archivos de idioma en diferentes páginas.

export var languageSelector = lang_de para alemán
o
export languageSelector = lang_eng para inglés

¿Tienes alguna idea de cómo usar el almacenamiento local para eso?

Realmente gracias a todos de antemano por su ayuda.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible utilizar el almacenamiento local para guardar la preferencia de idioma del usuario y luego recuperarla cuando sea necesario.

    Aquí hay un enfoque que puedes seguir:

    1. En el menú desplegable de selección de idioma, agrega un event listener a cada opción que guarde la selección del usuario en el almacenamiento local. Por ejemplo, si el usuario elige inglés: 
    localStorage.setItem("idiomaPreferido", "en");
    1. En tu código JavaScript, utiliza localStorage.getItem("idiomaPreferido") para recuperar el idioma preferido del usuario del almacenamiento local.

    2. Utiliza una declaración condicional para determinar qué archivo de idioma utilizar en función del valor obtenido del almacenamiento local:

    if (localStorage.getItem("idiomaPreferido") === "en") {
   export var selectorIdioma = lang_eng;
} else if (localStorage.getItem("idiomaPreferido") === "de") {
   export var selectorIdioma = lang_de;
}

    De esta manera, la variable selectorIdioma exportada se establecerá en función de la preferencia de idioma del usuario almacenada en el almacenamiento local y se podrá usar en toda la aplicación.

    Ten en cuenta que el almacenamiento local tiene limitaciones, como una capacidad de almacenamiento máxima y el hecho de que puede ser borrado por el usuario o el navegador. Sin embargo, para casos de uso simples como este, debería funcionar bien.

Comments are closed.