带有功能的Javascript本地存储？

Question

我有一个翻译功能，只需单击一个按钮，即可使用 javascript 将段落从英文切换为法文。现在我使用 innerhtml 手动抓取预翻译的段落。我想使用 localStorage 存储用户操作。如果他们点击翻译 onclick 事件，它应该自动在每个其他页面上运行 translate_fr 函数。我想避免用户每次加载新页面时都必须重新翻译网站。

我不知道如何使用某种条件语句来执行此操作选择使用 localstorage 存储在浏览器中。

 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`;
 
}

<button class="translate" type="button" onclick="translate_fr()">FR</button>

    <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>

Answer 1

你可以试试这样的：

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`;
  localStorage.setItem("isFrench", "1");
}

function translate_eng() {
  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.`;
  localStorage.setItem("isFrench", "0");
}

function check_translation() {
  const isFrench = localStorage.getItem("isFrench");
  return parseInt(isFrench);
}

function translate() {
  if (check_translation() === 1) {
    translate_fr();
    return;
  }

  translate_eng();
}

translate();

• 在加载时触发函数 translate()。
• 这可以检查本地存储值localStorage.getItem("isFrench");。
• 本地存储是字符串，因此转换为 int 但不是真正需要这样做。
• 当用户执行您的 onClick 时会设置哪个 事件（不在本例中）
• 如果为 1，则显示法语。
• 如果为 0，则显示英文。