javascript-为什么我不能使用存储变量而不是本地存储？

Question

So I tried to replace this code below that uses localStorage

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

function setUserName() {
  var myName = prompt('Please enter your name.');
  localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}
if(!localStorage.getItem('name')) {
  setUserName();
} else {
  var storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + storedName;
}
myButton.onclick = function() {
  setUserName();
}

with this code that retrieves from a stored variable.

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

var myName;
function setUserName() {
  myName = prompt('Please enter your name.');
  //localStorage.setItem('name', myName);
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}
if(!myName) {
  setUserName();
} else {
  //var storedName = localStorage.getItem('name');
  myHeading.textContent = 'Mozilla is cool, ' + myName;
}
myButton.onclick = function() {
  setUserName();
}

why does it not work accordingly?

Answer 1

When you refresh the page any variables are cleared. As such the if(!myName) returns true and the user is prompted again. LocalStorage allows you to save your variables as key/value pairs between page refreshes in the browser.

Also, check out this answer on sessionStorage vs localStorage: HTML5 Local storage vs. Session storage