Prep 8: 10.1, 10.4.1, and localStorage

Categories:

• Prep

  2 minute read  

Read

1. FunWebDev Chapter 10.1 (Array Functions)
   • Yes, you’ve seen these before! Now’s a great time to review 😉
2. FunWebDev Chapter 10.4.1 (brief overview)
3. The Modern JavaScript Tutorial - localStorage

Activity

For this activity, you will be trying out localStorage for yourself! Create two html files called 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
       • The value will be loaded as a string. You will need to convert it back 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