Mantenere la lingua selezionata in caso di cambio pagina o refresh

[djjunior]

salve
ho questo codice, sarebbe possibile , e come, far mantenere la lingua selezionata dal menù dropdown in bootstrap anche se cambio pagina o si fa il refresh?
Grazie

function updateContent() {
  const elements = document.getElementsByClassName("i18nelement");
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const k = element.getAttribute("data-i18n");
    element.innerHTML = i18next.t(k);
  }
}
async function i18Loader() {
  const langs = ["it","en", "fr", "de"];
  const jsons = await Promise.all(
    langs.map((l) => fetch("lang/" + l + ".json").then((r) => r.json()))
  );
  const res = langs.reduce((acc, l, idx) => {
    acc[l] = { translation: jsons[idx] };
    return acc;
  }, {});
  await i18next.init({
    lng: "it",
    debug: true,
    resources: res
  });
  updateContent();
  i18next.on("languageChanged", () => {
    updateContent();
  });
  const langSelector = document.getElementById("langSelector");
  langSelector.removeAttribute("disabled");
  langSelector.addEventListener("click", (e) => {
    i18next.changeLanguage(e.target.value);
  });
}
i18Loader();

[djjunior]

nessun può darmi una mano? grazie

[ciro78]

secondo me devi modificare questo:

devi fare in modo che il valore sia preso da locale storage altrimenti ad ogni pagina avrai sempre italiano

await i18next.init({
lng:"it",
debug:true,
resources: res
});

[djjunior]

Ho risolto così,con l'aiuto di un amico:

async function i18Loader() {
  const langs = ["it","en", "fr", "de"];
  const jsons = await Promise.all(
    langs.map((l) => fetch("lang/" + l + ".json").then((r) => r.json()))




  const res = langs.reduce((acc, l, idx) => {
    acc[l] = { translation: jsons[idx] };
    return acc;
  }, {});




 await i18next


    .init({
      lng: localStorage.getItem("lan") || 'it',
      debug: true,
      resources: res,
      fallbackLng: "it-IT",
      backend: {
        backendOptions: [{
          // can be either window.localStorage or window.sessionStorage. Default: window.localStorage
          store: typeof window !== 'undefined' ? window.localStorage : null
        }, {
          loadPath: 'lang/{{lng}}.json'
        }]
      }
    });


  function updateContent() {
    const elements = document.getElementsByClassName("i18nelement");
    for (let i = 0; i < elements.length; i++) {
      const element = elements[i];
      const k = element.getAttribute("data-i18n");
      element.innerHTML = i18next.t(k);
    }
  }


  updateContent();
  i18next.on("languageChanged", () => {
    updateContent();
  });


  const langSelector = document.getElementById("langSelector");
  langSelector.removeAttribute("disabled");
  langSelector.addEventListener("click", (e) => {
    i18next.changeLanguage(e.target.value);
    localStorage.setItem("lan", e.target.value);
  });


}


i18Loader();

Ora ti chiedo se puoi aiutarmi volendo prendere la const langs (con tutte le lingue) e metterli in una select?
ho messo questo codici a fine di quello precedente e ho fatto tipo:

var select = document.getElementById("lingua");
                var lingua = langs;         
                for(var i=0; i<lingua.length; i++) {                              
                    
                    select.options[select.options.length] = new Option(lingua[i],i);      
                };
  );

Ma naturalmente na va.... dove sbaglio?
Grazie

[djjunior]

Volendo prendere la const langs (con tutte le lingue) e metterli in una select?
ho usato questo codice alla fine di quello precedente e ho fatto tipo:

varselect= document.getElementById("lingua");
                var lingua = langs;         
                for(var i=0; i<lingua.length; i++){                              
                    
                    select.options[select.options.length]=newOption(lingua[i],i);      
                };
  );

Ma non va, grazie

[ciro78]

non va è troppo generico. hai errori? non funziona?