如何在页面刷新及跳转后保留会话中的用户名？

嘿，这个问题太常见了——你需要的就是在浏览器会话期间持久化用户输入的用户名，咱们用浏览器原生的sessionStorage就能完美解决！它专门用于存储会话级别的数据：只要当前浏览器标签页不关闭，刷新页面、同域名下跳转页面都不会丢失数据，完全匹配你的需求。

下面是具体的实现步骤：

1. 修改按钮点击逻辑，存储用户名 #

当用户通过弹窗输入名字后，除了展示问候语，把用户名存入sessionStorage：

// 获取按钮元素
const whoBtn = document.getElementById('who-are-you-btn');
// 获取用于展示问候语的元素
const greetingEl = document.getElementById('greeting');

whoBtn.addEventListener('click', function() {
  const userName = prompt('请输入你的名字：');
  if (userName) {
    // 将用户名存入sessionStorage
    sessionStorage.setItem('userName', userName);
    // 显示问候语
    greetingEl.textContent = `Hi ${userName}, welcome to the WebSite!`;
  }
});

2. 页面加载时自动恢复问候语 #

在页面初始化（DOM加载完成）时，检查sessionStorage里是否有保存的用户名，如果有，直接展示问候语，不用用户再点击按钮：

document.addEventListener('DOMContentLoaded', function() {
  const savedName = sessionStorage.getItem('userName');
  if (savedName) {
    greetingEl.textContent = `Hi ${savedName}, welcome to the WebSite!`;
  }
});

补充说明 #

• sessionStorage是和当前标签页绑定的：打开新标签页访问网站会重新开始会话，但同标签页内的刷新、跳转都能保留数据，正好符合你“整个会话周期”的要求。
• 如果需要跨标签页或者长期保留用户名，可以换成localStorage，但它会一直保存直到用户手动清除浏览器数据，根据你的场景，sessionStorage是更合适的选择。

内容的提问来源于stack exchange，提问作者Andrea Belluccia