如何使用Javascript根据用户输入的姓名展示欢迎消息

方案1：URL参数传递（新手友好易实现） #

• 第一步：编写输入表单页逻辑
  监听表单提交事件，收集用户输入的姓名后拼接到欢迎页URL中跳转即可：

  // 表单页JS代码
  const nameForm = document.querySelector('#nameForm')
  nameForm.addEventListener('submit', e => {
    e.preventDefault()
    const userName = document.querySelector('#nameInput').value.trim()
    // 拼接参数跳转到独立欢迎页
    window.location.href = `welcome.html?username=${encodeURIComponent(userName)}`
  })
  

• 第二步：编写独立欢迎页逻辑
  页面加载时解析URL携带的参数，用模板字符串拼接欢迎内容插入页面：

  // welcome.html的JS代码
  window.addEventListener('load', () => {
    const urlParams = new URLSearchParams(window.location.search)
    const userName = urlParams.get('username') || '访客'
    // 模板字符串拼接HTML欢迎内容
    const welcomeContent = `
      <div class="welcome-box">
        <h1>你好呀，${userName}！</h1>
        <p>欢迎参与本次家庭趣味问答</p>
      </div>
    `
    // 插入到页面指定容器中
    document.querySelector('#welcomeWrap').innerHTML = welcomeContent
  })
  

方案2：LocalStorage存储（刷新页面数据不丢失） #

• 表单提交时先把用户名存入本地存储再跳转：

  // 表单页JS代码
  nameForm.addEventListener('submit', e => {
    e.preventDefault()
    const userName = document.querySelector('#nameInput').value.trim()
    localStorage.setItem('quizUserName', userName)
    window.location.href = 'welcome.html'
  })
  

• 欢迎页读取本地存储的姓名渲染即可：

  // welcome.html的JS代码
  window.addEventListener('load', () => {
    const userName = localStorage.getItem('quizUserName') || '访客'
    const welcomeContent = `<h1>欢迎${userName}进入家庭趣味问答</h1>`
    document.body.insertAdjacentHTML('afterbegin', welcomeContent)
    // 不需要留存数据可以使用后删除
    // localStorage.removeItem('quizUserName')
  })
  

• 模板字符串需要用反引号（）包裹，变量占位用${变量名}`格式，不要写错符号
• 中文内容通过URL传递时必须用encodeURIComponent编码，避免出现乱码
• 可以在表单提交时增加非空校验，用户未输入姓名时先弹出提示再阻止提交

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