Prep 10: Save and Load

Due: Wednesday, Apr 16th

Read

• 5.5 Table and Form Accessibility
• 5.6 Styling and Designing Forms
• 10.4 Using Browser APIs
• LocalStorage, sessionStorage – from the Modern JavaScript Tutorial

Write

Try out localStorage for yourself! Create two html files named save.html and load.html. You may download this template file to help you get started.

save.html

• In a script element, write code to:
  1. Save your full name to a localStorage entry with the key fullname
  2. Save your favorite number to an entry with the key favnumber
  3. Save an array of at least three quotes to an entry with the key quotes
     • Hint: you will need to "stringify" the object

load.html

• First, add three elements to display the saved data:
  1. A div with the id name-display
  2. A div with the id favorite-display
  3. A ul with the id quotes-display
• Then, in a script element (at the bottom of the body), write code to:
  1. Load the value with the fullname key from localStorage and set the first div's textContent to that value
  2. Load the value with the favnumber key, add 5 to it, and then set it to the second div
     • Hint: the value will be loaded as a string, so you will need to convert it to an int.
  3. Load the value with the quotes key and make a new list entry for each quote
     • Hint: you will need to "parse" the string and convert it back to an object

Submission

When you are finished, submit both files to Gradescope.