HTML怎么显示翻译语言记忆_HTML最近使用语言快捷入口【说明】-html教程-PHP中文网

用 localstorage 存语言代码（如 "zh-cn"），页面加载时读取并设为属性值，配合只替换文本节点和 data-i18n-key 更新内容，避免重写 dom 导致事件丢失或输入清空。

html怎么显示翻译语言记忆_html最近使用语言快捷入口【说明】

靠 localStorage 存语言代码（如 "zh-CN" 或 "ja"），不是靠 cookie，也不是靠服务器 session。它轻量、前端可控、关掉页面也不丢，且所有现代浏览器都支持。

用户切换语言后，立刻执行 localStorage.setItem("preferredLang", "en")
页面加载时，优先读取 localStorage.getItem("preferredLang")，没值再 fallback 到 navigator.language 或 document.documentElement.lang
别用 sessionStorage——关掉标签页就清空，不符合“记忆”需求
注意：如果用户手动清过浏览器数据，或启用了无痕模式，localStorage 会失效，此时必须有降级逻辑

不能只靠 JS 动态改 document.documentElement.lang，那只是运行时行为，搜索引擎爬虫看不到。真正起效的是 HTML 根标签上的 lang 属性，它得在首屏 HTML 中就存在。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

服务端渲染（SSR）或静态生成（如 Jekyll、Hugo）时，把用户语言偏好注入到中
纯前端站点可走「两阶段」：初始 HTML 固定用 lang="en"（或检测 navigator.language 后服务端吐对应值），再由 JS 补充翻译内容并同步更新 document.documentElement.lang
避免把 lang 写成变量占位符如却没被实际替换——会导致无效值甚至空字符串，破坏可访问性

因为 element.innerHTML = translatedText 是粗暴重写 DOM，所有已绑定的事件监听器、第三方组件实例（比如日期选择器、富文本框）、甚至 <input> 的当前输入值都会消失。

正确做法是只替换文本节点（node.nodeType === 3），跳过元素节点和表单控件
对含交互的区域（如按钮、下拉菜单），改用 data-i18n-key 属性标记，再通过 textContent 或 dataset 更新，不碰结构
特别警惕 <textarea></textarea> 和 <input>：它们的值在 value 属性上，不是 innerHTML，硬刷会清空用户输入
Vue/React 项目更不能直接操作 DOM 翻译——该走响应式数据驱动

核心是分离「语言切换触发」和「内容更新动作」：用一个轻量控制器管理语言状态，再通知各模块按需刷新，而不是 reload 整页或暴力刷 body。

定义统一入口函数，如 switchLanguage("fr")，内部只做两件事：存到 localStorage、触发自定义事件 lang-change
各翻译模块（导航栏、标题、提示文案）监听该事件，各自调用自己的 render() 或 updateText()
避免全局 location.reload()，尤其在单页应用（SPA）中会丢失路由状态和滚动位置
如果用了类似 translate.js 这类自动扫描 DOM 的库，确认它是否支持 translate.refresh() 类方法，而不是依赖刷新