回归前端学习第一天

回顾一下学过的内容吧

推荐学习网站哟

推荐一个非常nice的网站哟，想开始学习前端的小伙伴，或者想重温基础的小伙伴都可以来这里重新学习哈 HTML CSS JS的基础知识这里都覆盖啦
Web入门 开发学习网站

制定属于自己的标题信息啦

通过Web Storage API 保存信息，用户输入后会由Web Storage API 保存下来，关闭页面再打开，仍可得到之前的信息，且该信息可由用户自行输入

运用button标签触发事件

<button>切换用户</button>

在script中，给button设变量，给h1标题设变量

let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');

写函数来设置标题h1的欢迎词

function setUserName() {
  let myName = prompt('请输入你的名字');
  localStorage.setItem('name', myName);
  myHeading.textContent = '好帅哦，' + myName;
}
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  let storedName = localStorage.getItem('name');
  myHeading.textContent = '好帅哦，' + storedName;
}

其中，首先调用了 prompt() 函数弹出对话框，支持客户自行输入，并将数据保存在myName变量，接下来调用localStorage API ，将数据存在浏览器中，供后续获取，这里用 localStorage 的 setItem() 函数来创建一个’name’ 数据项，并把 myName 变量复制给它。最后将 textContent 属性设置为一个欢迎字符串加上这个新设置的数据。
然后用if else来检测‘name’数据是否存在，不存在则调用setUserName() 创建。若存在（即用户上次访问时设置过），调用 getItem() 获取保存的名字，像上文的 setUserName() 那样设置 textContent

为按钮设置事件处理器onclick

myButton.onclick = function() {
   setUserName();
}

这样，一个具有自己特色的欢迎提示就完成啦！一起试试吧~

优化一下？若提示中出现null,则加一个判断在setUserName函数中加入if判断，来检查用户是否输入了null或者空名字

function setUserName() {
  let myName = prompt('请输入你的名字。');
  if(!myName || myName === null) {
    setUserName();
  } else {
    localStorage.setItem('name', myName);
    myHeading.innerHTML = 'Mozilla 酷毙了，' + myName;
  }
}