如何使用本地存储/cookie 保存 javascript 函数输出？或任何其他方式？

Question

我有一个加载英文的网站，我自己手动将每个段落翻译成法文。通过一个简单的功能，当您单击 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>

所有页面都有这样设置的两个功能，我只需要这些功能运行是否决定在主页上单击fr或en。如果他们单击 FR，则需要存储该决定，并且当下一页运行时 translate_fr 函数会自动运行并交换所有段落。

Answer 1

我不会这样做，但如果你想保持你的结构，你可以这样做：

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

Answer 2

你很幸运，这方面的 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()
}

Answer 3

我更多地回答有关内容翻译的部分，因为您通常会通过使用单独的内容对象来做到这一点。在这个对象中，您存储所有内容，并使用 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>