可利用 localStorage 持久保存“自动检测源语言”开关状态:初始化时读取并设置 UI;用户操作时存入 'true'/'false' 字符串;翻译前动态读取该值决定是否启用检测;支持一键重置清除设置。

可以利用 localStorage 持久保存用户对“自动检测源语言”功能的开关状态,让翻译工具在刷新或重进页面后仍记住用户选择。
初始化时读取 localStorage 中的语言检测开关状态
页面加载后,检查 localStorage 是否已存有 autoDetectSource 的值(布尔类型字符串或布尔值),并据此设置 UI 控件(如 switch 或 checkbox)的初始状态:
- 使用
localStorage.getItem('autoDetectSource')获取值 - 若返回
'true'或true,则启用自动检测;否则默认关闭 - 注意:
localStorage只支持字符串,建议统一存为'true'/'false',读取时用=== 'true'判断
监听开关变化并写入 localStorage
当用户点击开关控件(例如一个 <input type="checkbox"> 或自定义 toggle)时,立即将新状态存入 localStorage:
- 绑定
change或click事件 - 根据控件当前是否被选中,调用
localStorage.setItem('autoDetectSource', isChecked ? 'true' : 'false') - 同时可同步更新内部逻辑变量(如
isAutoDetectEnabled),供翻译函数调用
在翻译逻辑中读取并应用该偏好
执行翻译前,不再硬编码是否启用自动检测,而是动态读取该标志:
立即学习“前端免费学习笔记(深入)”;
- 例如:
const shouldAutoDetect = localStorage.getItem('autoDetectSource') === 'true'; - 若为
true,则调用浏览器detectLanguage()(如使用Intl.getCanonicalLocales配合文本分析库)或第三方 API 自动识别源语言 - 若为
false,则直接使用用户手动选择的源语言
可选:提供一键重置功能
在设置区域添加“恢复默认”按钮,点击后清除该项设置并还原 UI 和行为:
- 执行
localStorage.removeItem('autoDetectSource') - 将开关控件设为默认值(如未勾选)
- 将运行时变量
isAutoDetectEnabled设为false



















