本文介绍一种不依赖后端或框架的纯 javascript 方案，通过 localstorage 持久化用户语言偏好，并在页面加载时自动恢复选中状态与文本内容，确保多页站点语言切换无缝一致。
本文介绍一种不依赖后端或框架的纯 javascript 方案，通过 localstorage 持久化用户语言偏好，并在页面加载时自动恢复选中状态与文本内容，确保多页站点语言切换无缝一致。
要让多语言支持在跨页面跳转后依然生效，核心在于：每次页面加载时主动读取 localStorage 中保存的语言设置，并立即应用对应语言状态与文本翻译——而不仅仅是点击时更新。你当前的代码只在点击事件中触发 changeLang()，却缺少页面初始化阶段的“恢复逻辑”，因此新页面加载后会重置为默认语言（如 "tr"），导致体验断裂。
以下是完整、健壮的实现方案（含初始化 + 切换 + 持久化）：
✅ 步骤 1：定义翻译数据与 DOM 映射
// script.js
const translations = {
en: {
"welcome": "Welcome to our site!",
"contact": "Contact Us",
"lang_en": "EN",
"lang_tr": "RU" // 注意：此处 data-lang="tr" 实际对应俄语，建议修正 key 命名为更准确的 "ru"
},
ru: {
"welcome": "Добро пожаловать на наш сайт!",
"contact": "Свяжитесь с нами",
"lang_en": "АН",
"lang_tr": "РУ"
}
};
// 映射页面中需翻译的元素（推荐使用 data-i18n 属性统一标识）
const i18nElements = {
"welcome": document.getElementById("welcome-msg"),
"contact": document.getElementById("contact-link"),
"lang_en": document.querySelector('a[data-lang="en"]'),
"lang_tr": document.querySelector('a[data-lang="ru"]') // 同步修正 data-lang 值
};✅ 正确步骤 2：页面加载时自动恢复语言（关键！）
document.addEventListener('DOMContentLoaded', function() {
const langwrap = document.querySelector(".langwrap");
if (!langwrap) return;
const links = langwrap.querySelectorAll("a");
let savedLang = localStorage.getItem("preferredLang") || "ru"; // 默认俄语
// ✅ 初始化：根据 localStorage 设置激活状态和文本
function initLanguage() {
// 清除所有激活态
links.forEach(el => el.classList.remove("activated"));
// 找到对应语言的链接并高亮
const targetLink = Array.from(links).find(el => el.dataset.lang === savedLang);
if (targetLink) {
targetLink.classList.add("activated");
}
// 立即翻译全部元素
changeLang(savedLang, i18nElements);
document.documentElement.lang = savedLang;
}
// ✅ 切换语言函数（保持不变，但确保调用前已初始化 DOM）
function changeLang(lang, elements) {
for (const key in elements) {
if (elements[key] && translations[lang] && translations[lang][key] !== undefined) {
elements[key].textContent = translations[lang][key];
}
}
}
// ✅ 绑定切换事件
links.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const newLang = this.dataset.lang;
if (!newLang) return;
// 更新激活状态
links.forEach(el => el.classList.remove("activated"));
this.classList.add("activated");
// 持久化并应用
localStorage.setItem("preferredLang", newLang);
changeLang(newLang, i18nElements);
document.documentElement.lang = newLang;
});
});
// ? 必须调用：页面加载完成即恢复上次选择
initLanguage();
});✅ 补充建议（提升健壮性）
-
HTML 中统一使用语义化 data-i18n 属性（替代硬编码 key 名），例如：
<h1 id="welcome-msg" data-i18n="welcome">Welcome to our site!</h1> <a href="#" data-lang="en" data-i18n="lang_en">EN</a>
对应 JS 可自动扫描 document.querySelectorAll("[data-i18n]") 构建映射，避免手动维护 i18nElements。
Article To Html下载文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 语言 code 规范化：将 data-lang="tr" 改为 data-lang="ru"（土耳其语是 tr，俄语是 ru），避免混淆。
- 降级处理：在 changeLang() 中添加 fallback（如 translations[lang][key] || translations["ru"][key]），防止缺失翻译导致空白。
- SEO 友好：<html lang="ru"> 的设置有助于搜索引擎识别页面语言。
? 总结：多页多语言的核心不是“记住点击”，而是“每次加载都重建状态”。只要在 DOMContentLoaded 中执行一次 initLanguage()，就能彻底解决跳转后语言丢失问题——无需后端、不依赖框架，轻量且可靠。
立即学习“前端免费学习笔记（深入）”；
