多页面HTML网站多语言选择跳转后状态不保留的解决方法

核心思路 #

利用localStorage中已保存的语言设置，在每个页面加载完成后主动读取并应用，同步更新语言切换按钮的激活样式与页面文本内容。

修改后的完整代码 #

document.addEventListener('DOMContentLoaded', function() {
    const langwrap = document.querySelector(".langwrap"),
          link = langwrap.querySelectorAll("a"),  
          elements = {....} // 你的网站文本元素映射
    let lang = localStorage.getItem("langwrap") || "tr";
    const data = {EN: {}, RU:{}} // 你的翻译数据

    // 页面初始化：应用保存的语言设置
    function initLang() {
        // 移除所有按钮的激活状态
        langwrap.querySelectorAll(".activated").forEach(el => {
            el.classList.remove("activated");
        });
        // 匹配保存的语言，给对应按钮添加激活类
        const targetLink = Array.from(link).find(el => el.dataset.lang === lang);
        if (targetLink) {
            targetLink.classList.add("activated");
        }
        // 更新页面文本和根元素语言属性
        changeLang(lang, elements);
    }

    // 语言切换点击事件逻辑
    link.forEach((el, i) => {
        el.addEventListener('click', () => {
            langwrap.querySelectorAll(".activated").forEach((element) => {
                element.classList.remove("activated");
            });
            el.classList.add("activated");

            const attr = el.dataset.lang;
            lang = attr;
            localStorage.setItem("langwrap", attr);
            localStorage.setItem("langIndex", i);
            changeLang(lang, elements);
        });
    });

    function changeLang(lang, elements) {
        document.documentElement.lang = lang;
        for (const key in elements) {
            if (elements.hasOwnProperty(key)) {
                const element = elements[key];
                if (element) {
                    element.textContent = data[lang][key];
                }
            }
        }
    }

    // 页面加载完成后立即执行初始化
    initLang();
});

关键修改点 #

• 新增initLang函数，负责页面启动时的语言状态同步：
  1. 清除所有语言按钮的activated类
  2. 根据localStorage中保存的语言值，定位对应按钮并添加激活样式
  3. 调用changeLang更新页面所有文本内容
• 在DOM加载完成后立即触发initLang，确保任意页面打开时都能沿用之前的语言选择

额外注意事项 #

• 确保所有页面都引入了修改后的script.js文件
• 核对elements对象与data翻译数据，保证每个页面的文本元素都能正确匹配对应翻译值

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