Adding a personalized welcome message

Next we will add another bit of code, to change the page‘s title to include a personalized welcome message when the user first navigates to the site. This welcome message will persist when the user leaves the site and then comes back. We will also include an option to change the user and therefore the welcome message anytime it is required.

1. In index.html, add the following line just before the <script> element:

   <button>Change user</button>
   

   　　

2. In main.js, add the following code at the bottom of the file, exactly as written — this grabs references to the new button we added and the heading, and stores them in variables:

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

   　　

3. Now add the following function to set the personalized greeting — this won‘t do anything yet, but we‘ll use it later on:

   function setUserName() {
     var myName = prompt(‘Please enter your name.‘);
     localStorage.setItem(‘name‘, myName);
     myHeading.innerHTML = ‘Mozilla is cool, ‘ + myName;
   }
   

   　　

   This function contains a prompt() function, which brings up a dialog box, a bit likealert() except that prompt() asks the user to enter some data, and stores that data in a variable after the user presses OK. In this case, we are asking the user to enter their name. Next, we call on an API called localStorage, which allows us to store data in the browser and retrieve it later on. We use localStorage‘s setItem()function to create and store a data item called ‘name‘, and set its value to themyName variable that contains the name the user entered. Finally, we set theinnerHTML of the heading to a string, plus the user‘s name.

4. Next, add this if ... else block — we could call this the initialization code, as it sets up the app when it first loads:

   if(!localStorage.getItem(‘name‘)) {
     setUserName();
   } else {
     var storedName = localStorage.getItem(‘name‘);
     myHeading.innerHTML = ‘Mozilla is cool, ‘ + storedName;
   }
   

   　　

   This block first uses the negation operator (logical NOT) to check whether the namedata item exists. If not, the setUserName() function is run to create it. If so (i.e. the user set it during a previous visit), we retrieve the stored name using getItem() and set the innerHTML of the heading to a string, plus the user‘s name, the same as we did inside setUserName().

5. Finally, put the below onclick event handler on the button, so that when clicked thesetUserName() function is run. This allows the user to set a new name whenever they want by pressing the button:

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

   　　

Now when you first visit the site, it‘ll ask you for your username then give you a personalized message. You can then change the name any time you like by pressing the button. As an added bonus, because the name is stored inside localStorage, it persists after the site is closed down, so the personalized message will still be there when you open the site up again!