推荐用 localStorage.setItem() 保存语言和地区代码,如 'zh-CN' 或 JSON 字符串 {lang:'zh',region:'CN'};读取时解析还原,初始化时优先使用保存值,否则回退 navigator.language 或默认值 'en-US'。

可以直接用 localStorage.setItem() 保存用户选择的语言和地区代码(如 "zh-CN" 或 "en-US"),推荐组合为单个字符串或 JSON 字符串,读取时解析还原即可。
存储格式建议:用连字符拼接或 JSON 对象
语言和地区通常成对出现,比如中文简体(中国)是 zh-CN,英文美国是 en-US。可选两种方式:
-
简洁方式:拼成一个字符串,如
localStorage.setItem('locale', 'zh-CN') -
扩展方式:存为 JSON 字符串,便于后续加字段(如时区、字体偏好),例如:
localStorage.setItem('locale', JSON.stringify({ lang: 'zh', region: 'CN', timezone: 'Asia/Shanghai' }))
保存用户选择的典型操作流程
假设页面有下拉菜单 <select id="locale-select"></select>,选项值形如 zh-CN、ja-JP:
- 监听选择变化:
document.getElementById('locale-select').addEventListener('change', saveLocale) - 在
saveLocale函数中获取值并写入:
const selected = event.target.value;<br>localStorage.setItem('locale', selected); - 可额外触发一次页面语言切换(如重载 i18n 配置或更新文案)
读取与初始化:页面加载时恢复偏好
在页面初始化阶段(如 DOMContentLoaded)检查并应用已保存的设置:
立即学习“前端免费学习笔记(深入)”;
- 读取:
const saved = localStorage.getItem('locale'); - 若存在且有效,解析并设为当前语言:
if (saved) {<br> const locale = JSON.parse(saved); // 或直接用 saved(若存的是字符串)<br> applyLanguage(locale); // 自定义函数,更新文案、HTML lang 属性等<br>} - 未保存时,可回退到
navigator.language或默认值(如'en-US')
注意事项与小技巧
localStorage 是同步、同源、无过期的,注意以下几点:
- 值必须是字符串 —— 所以对象要
JSON.stringify(),读取后要JSON.parse() - 不同协议/端口/子域名之间不共享,
https://a.example.com和http://a.example.com视为不同源 - 手动清除浏览器缓存或调用
localStorage.removeItem('locale')可重置偏好 - 敏感信息(如 token)不要存在 localStorage;地区偏好属于安全范围,可放心使用


















