如何使用localStorage记住用户翻译选择 跨页面自动触发translate_fr函数

你猜测的实现逻辑是正确的，核心逻辑就是「点击切换语言时存储用户偏好→所有页面加载时读取偏好自动执行对应翻译」，具体实现如下：

1. 完善JS逻辑，加入存储与自动读取能力 #

补全切回英文的函数，同时在翻译逻辑中加入localStorage存储、元素存在性判断（避免无对应文案的页面报错）、页面加载自动执行逻辑：

// 法语翻译函数
function translate_fr(){
  // 存储用户语言偏好到localStorage，永久有效除非用户主动清理浏览器缓存
  localStorage.setItem('preferred_lang', 'fr');
  const introEle = document.getElementById("intro");
  if (introEle) {
    introEle.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`;
  }
  // 后续新增其他需要翻译的段落，在这里加对应的innerHTML替换逻辑即可
}

// 英文翻译函数（用于切回默认原文）
function translate_en(){
  localStorage.setItem('preferred_lang', 'en');
  const introEle = document.getElementById("intro");
  if (introEle) {
    introEle.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.`;
  }
  // 后续新增其他需要翻译的段落，在这里加对应的innerHTML替换逻辑即可
}

// 页面加载完成后自动读取偏好执行对应翻译
document.addEventListener('DOMContentLoaded', function() {
  const preferredLang = localStorage.getItem('preferred_lang');
  // 如果用户之前选了法语就自动切法语，否则默认显示英文
  preferredLang === 'fr' ? translate_fr() : translate_en();
});

2. 优化按钮交互（可选） #

可以把按钮改成动态切换状态，不用单独放两个语言按钮，也避免行内onclick的写法更易维护：

<button class="translate" type="button" id="langToggle">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>

<script>
// 绑定按钮点击切换逻辑
const langToggle = document.getElementById('langToggle');
langToggle.addEventListener('click', function() {
  const currentLang = localStorage.getItem('preferred_lang') || 'en';
  if (currentLang === 'en') {
    translate_fr();
    this.textContent = 'EN';
  } else {
    translate_en();
    this.textContent = 'FR';
  }
})

// 页面加载时同步按钮显示的文字
document.addEventListener('DOMContentLoaded', function() {
  const preferredLang = localStorage.getItem('preferred_lang');
  langToggle.textContent = preferredLang === 'fr' ? 'EN' : 'FR';
})
</script>

多页面生效注意事项 #

• 上面的所有JS代码需要在你网站的所有页面都引入，才能保证每个页面加载时都能读取到存储的语言偏好自动执行翻译
• 如果后续需要支持更多语言，只需要新增对应的翻译函数、调整localStorage存储的标识判断即可

内容的提问来源于stack exchange，提问作者gears244