0

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?

user8783104
  • 185
  • 2
  • 11
  • 1
    When ever you load the page `myName` is _undefined_ thus it prompts for name. – Satpal Nov 03 '17 at 12:45
  • `localStorage` is persisted on the local machine across requests, hence local _Storage_. Variables are recreated from fresh each time the page is loaded - they are essentially not stored at all – Rhumborl Nov 03 '17 at 12:49
  • Local storage allows you to store data locally in the browser, so it persists the data upon the next page load. When you load the page again without local storage, the variable is reset. – Dream_Cap Nov 03 '17 at 12:50

1 Answers1

2

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

ben-ledi
  • 124
  • 5
  • 1
    `LocalStorage` allows you to save key/value pairs, not variables per se – nicholaswmin Nov 03 '17 at 12:50
  • thx, there's one thing i don't get though; why doesn't the prompt display for the first time when I load the page(the local storage code)? the program skips this line and runs this myHeading.textContent = 'Mozilla is cool, ' + myName; which causes the browser to display null. – user8783104 Nov 03 '17 at 12:56
  • Good question, I'd recommend using the browser inspector to take a look at the local and session storage and see what is going on there. It might have previously stored data that is now being retrieved and needs to be cleared. If you open the inspector and go to storage, you'll see options for local and session. You can delete them from there. Or go to the console (in the inspector) and enter `localStorage.clear();` – ben-ledi Nov 03 '17 at 13:03
  • P.s. if you're happy with the answer, I'd appreciate the tick to mark it as correctly answered. Up to you when/if it does! – ben-ledi Nov 03 '17 at 13:06