如何实现网站全站语言切换，而非仅当前页面生效？

我正在开发一个多语言网站，默认所有文本和链接显示法语，其他语言内容隐藏。点击「ENG」按钮切换显示英语内容，点击「中文」按钮切换显示中文内容，但目前切换仅在当前页面生效，跳转后自动恢复为法语，求全站生效的实现方法。

现有代码 #

HTML结构 #

<nav id="mainnav">
    <a href="index.html" class="fr">Accueil</a> 
    <a href="nosproduits.html" class="fr">Nos produits</a>
    <a href="apropos.html" class="fr">À propos</a>
    <a href="contact.html" class="fr">Contact</a>

    <a href="index.html" class="eng">Home</a> 
    <a href="nosproduits.html" class="eng">Our products</a>
    <a href="apropos.html" class="eng">About</a>
    <a href="contact.html" class="eng">Contact</a>

    <a href="index.html" class="zh">首页</a> 
    <a href="nosproduits.html" class="zh">我们的食品</a>
    <a href="apropos.html" class="zh">关于我们</a>
    <a href="contact.html" class="zh">联络我们</a>
</nav>

<div id="navright">
    <span id="french">FR</span>
    <span id="english">ENG</span>
    <span id="chinese">中文</span>
</div>

CSS样式 #

.eng {
    display: none;
}

原JavaScript代码 #

$(document).ready(function(){

    $("#chinese").click(function(){
        $(" .eng").hide();
        $(" .fr").hide();
        $(" .zh").show();
    })

    $("#english").click(function(){
        $(" .eng").show();
        $(" .fr").hide();
        $(" .zh").hide();
    })

    $("#french").click(function(){
        $(" .eng").hide();
        $(" .fr").show();
        $(" .zh").hide();
    })
})

解决方案：利用localStorage存储语言偏好 #

核心思路是把用户选择的语言存在浏览器的localStorage中，页面加载时自动读取该值并切换到对应语言状态，实现全站持久化。

1. 修改JavaScript代码 #

添加存储逻辑与初始化读取逻辑，同时封装统一的切换函数：

$(document).ready(function(){
    // 页面加载时读取缓存的语言设置，默认法语
    const savedLang = localStorage.getItem('selectedLang') || 'fr';
    switchLang(savedLang);

    // 中文切换按钮
    $("#chinese").click(function(){
        switchLang('zh');
        localStorage.setItem('selectedLang', 'zh');
    })

    // 英语切换按钮
    $("#english").click(function(){
        switchLang('eng');
        localStorage.setItem('selectedLang', 'eng');
    })

    // 法语切换按钮
    $("#french").click(function(){
        switchLang('fr');
        localStorage.setItem('selectedLang', 'fr');
    })

    // 统一语言切换函数
    function switchLang(lang){
        $('.fr').hide();
        $('.eng').hide();
        $('.zh').hide();
        $(`.${lang}`).show();
    }
})

2. 调整CSS默认样式 #

确保默认状态下仅法语显示，其他语言隐藏：

.eng, .zh {
    display: none;
}

3. 保持HTML结构不变 #

现有HTML结构无需修改，直接沿用即可。

补充说明 #

• localStorage会将语言偏好持久保存在浏览器中，除非用户手动清除缓存，否则下次打开网站会自动恢复上次选择的语言。
• 若需支持更复杂场景（如服务器端渲染、URL参数传递），可扩展为将语言参数附加在URL中，但对于纯静态网站，localStorage是最简单高效的方案。

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