Mini-project 4: Client-side state

Instructions

This project focuses on saving state in a browser. Specifically, we'll be looking at using HTML5's localStorage to store a user's name as entered via a form.

You should create a single HTML file named mp4.html. This page should include JavaScript that should be responsible for the following:

• on document startup, if the localStorage key 'login' is present, display Pane1:
  • a message welcoming the user by name (this should be the value associated with the localStorage 'login' key)
  • a button to sign out, which triggers the JavaScript to remove the 'login' key, hide Pane1, and display Pane2
• on document startup, if the localStorage 'login' key is not set, display Pane2:
  • a message saying "Please log in"
  • a text box for a name
  • a button to submit that triggers JavaScript that will save the value in the name text box to the localStorage 'login' key, hide Pane2, and show Pane1

Note that in JavaScript, you can hide a DOM element by setting its display style to 'none', e.g.,

You can show it by setting display to an empty string.

Submission

Your file should be located on Joust in the directory ~/public_html/csc401/mp4/, in addition to being uploaded to Canvas. The rubric can be found here. The Canvas submission page is here.