LD11: Using localStorage due Thu 13 Nov 13:20
Preparation for Lab Day
In preparation for lab day, do these actions:- Make sure you don't have any uncommitted work in your workspace. Then pull
from the upstream remote to get the new hw11 directory.
- Copy all the files and directories from hw10 into it. We will
continue working with the hw11 files.
- Copy the functions setObject() and getObject() from
https://josephus.sergeantservices.com/classes/w1/source/localStorageBig.html
into your shopping list Javascript file.
- Play with the functions by manually creating some non-simple variables
and writing them to localStorage. In your browser developer tools, find
the variables you stored.
- Then modify your code to retrieve the stored values in a separate variable
to verify you can retrieve them properly.
- Commit your working code and push it to Github.
On Lab Day
- Begin by showing the instructor: (1) The variables you created in
localStorage (from the browser developer tools) and (2) the code you
used to create and retrieve the value.
- Now we will use our knowledge of working with localStorage to produce a
save() method for the List class. When save() is called it should store the List
into localStorage in a variable named the same as the name of the list. Test
it.
- Now go through all the list methods. Any method that modifies the list in
any way should call the save() method after the list has been changed. In
this way, localStorage will alway be in sync with this list.
- Now we want to write code that will be executed when the page is initially
loaded. The method should read the data from local storage and should build
the page accordingly. Also, it should create a new List object from the
stored data. This step is necessary because the methods do not get saved in
localStorage so we only have the raw data and not the List data type.
HINT: To set an even listener for when the page has completed loading use:
document.addEventListener("DOMContentLoaded", ...)
- Show your work to the instructor. If you finish early you can start
work on the homework assignment.