如何使用本地存盤/cookies保存javascript函式輸出？或任何其他方式？-有解無憂

我有一個用英語加載的網站，并且我自己將每個段落手動翻譯成法語。使用一個簡單的函式，當您點擊 translate_fr() onclick 時，所有段落都被它們的 id 抓取并切換到存盤在我的 .js 檔案中的法語段落。當您單擊 translate_en() 時，它會恢復為英文。基本上，當用戶單擊 EN 或 FR 時，我希望該決定延續到每個其他頁面，我需要以某種方式存盤該函式輸出，并在他們進入另一個頁面時自動運行。如果他們第一次進入主頁并翻譯成法語，其他頁面也應該是法語。

我只留下了一個段落的例子，不過如果你需要更好地理解這里是域名 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>

uj5u.com熱心網友回復：

我不會這樣做，但如果你想保持你的結構，你可以這樣做：

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()
}

uj5u.com熱心網友回復：

你很幸運，這個 API 非常簡單（MDN 對此進行了很好的描述：https : //developer.mozilla.org/en-US/docs/Web/API/Window/localStorage）。

只需使用密鑰將您的值存盤在本地存盤中：

localStorage.setItem('your-key', 'your-value')

然后得到這樣的值：

localStorage.getItem('your-key')

不過要注意 JSON 編碼。

/e 您的示例可以像這樣以簡單的形式進行重組：

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()
}

uj5u.com熱心網友回復：

我更多地回答關于內容翻譯的部分，因為您通常會通過使用單獨的內容物件來做到這一點。在此物件中，您存盤所有內容，并使用 js 框架或 vanilla js，將其注入特定段落。這是一種更具可擴展性的方法，因為您可以輕松地de向物件添加或任何其他語言，而無需更改邏輯。關于這將如何作業的一個小例子：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354529.html

標籤：javascript html 饼干本地存储

上一篇：Chrome開發工具顯示檔案名和行號而不是main.js

下一篇：未捕獲的型別錯誤：無法讀取未定義的屬性（讀取“textContent”）