如何不使用localStorage，用JavaScript保存登录页语言并跳转后保留

核心思路是通过URL查询参数传递用户选择的语言，这是不依赖本地存储的轻量可靠方案，能确保跳转后页面直接获取语言配置。

登录页面（Login.html） #

先添加语言选择的下拉控件，再配合跳转逻辑传递参数：

<!-- 语言选择下拉框 -->
<select id="languageSelect">
  <option value="en">English</option>
  <option value="fr">Français</option>
  <option value="zh">中文</option>
</select>
<button onclick="saveAndRedirect()">登录并跳转</button>

<script>
function saveAndRedirect() {
  // 获取选中的语言值
  const selectedLanguage = document.getElementById("languageSelect").value;
  // 跳转时将语言作为查询参数拼接到URL，用encodeURIComponent避免特殊字符解析问题
  window.location.href = `home.html?lang=${encodeURIComponent(selectedLanguage)}`;
}
</script>

首页（home.html） #

从URL参数中读取语言，再应用到页面内容：

<!-- 示例可切换语言的页面内容 -->
<h1 id="title">Welcome</h1>
<p id="desc">This is your home page</p>

<script>
// 从URL查询参数中获取语言，未获取到则用英文作为默认值
const urlParams = new URLSearchParams(window.location.search);
const userLanguage = urlParams.get('lang') || 'en';

// 设置文档语言属性
document.documentElement.lang = userLanguage;

// 定义各语言对应的文本内容
const languageTexts = {
  en: {
    title: 'Welcome',
    desc: 'This is your home page'
  },
  fr: {
    title: 'Bienvenue',
    desc: 'Ceci est votre page d\'accueil'
  },
  zh: {
    title: '欢迎',
    desc: '这是您的首页'
  }
};

// 更新页面文本
document.getElementById('title').textContent = languageTexts[userLanguage].title;
document.getElementById('desc').textContent = languageTexts[userLanguage].desc;
</script>

实用优化点 #

• 跨页面参数延续：从首页跳转到其他页面时，需继续把lang参数拼接到新URL，确保全站语言一致
• 参数合法性校验：接收参数时判断是否为支持的语言类型，避免非法参数导致页面异常
• 后端会话存储（可选）：如果有后端服务，可将语言参数存入Session，前端后续请求自动携带，避免URL参数暴露

内容的提问来源于stack exchange，提问作者Benjazia mohamed oussama