如何用localStorage保存用户语言选择 页面加载时自动执行对应翻译函数

这个需求完全可以实现，只需要修改原有JS代码，增加localStorage的存储和读取逻辑即可，不用调整现有HTML结构。

现有HTML代码不需要做任何修改，只需要把你原来的JS代码替换成下面的代码即可，所有页面都引入这段JS就能实现跨页面语言状态同步。

修改后的完整JS代码 #

// 原有英文翻译函数，增加存储逻辑
function translate_en(){
    // 存储用户选择的语言到localStorage
    localStorage.setItem('preferred_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
    localStorage.setItem('preferred_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.`;
    // 你其他法语翻译的逻辑也可以放在这里
}

// 页面加载完成后自动读取存储的语言，执行对应翻译
document.addEventListener('DOMContentLoaded', function() {
    const savedLang = localStorage.getItem('preferred_lang');
    if(savedLang === 'fr') {
        translate_fr();
    } else {
        // 默认英文，不用额外操作也可以，加这行是避免特殊情况内容异常
        translate_en();
    }
})

逻辑说明 #

• localStorage是浏览器提供的本地存储能力，只要是同域名（你的lionkuts.ca下所有页面）都可以读取到存储的内容，关闭浏览器后数据也不会丢失
• 每次用户点击EN/FR按钮时，都会把当前选择的语言标识存储到localStorage的preferred_lang字段
• 每个页面加载完成后都会先读取这个字段，如果用户之前选过法语，就自动调用法语翻译函数，否则默认展示英文

优化建议（可选） #

如果后续站点翻译的段落越来越多，你可以把所有翻译内容整理成结构化的对象，不用单独为每个段落写操作DOM的代码，维护起来会更方便。

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