LD11: Using localStorage due Thu 16 Nov 13:20

Preparation for Lab Day

1. In your workspace create a directory named hw11 and copy all the files and directories from hw10 into it. We will continue working with the hw11 files.
2. Copy the functions setObject() and getObject() from https://josephus.hsutx.edu/classes/w1/source/localStorageBig.html into your shopping list Javascript file.

3. 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.

4. Then modify your code to retrieve the stored values in a separate variable to verify you can retrieve them properly.

5. Commit your working code and push it to Bitbucket.

On Lab Day

1. 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.

2. Now we will use our knowledge of working with localStorage to produce a save() method for the List class. When save() it called it should store the List into localStorage in a variable named the same as the name of the list. Test it.

3. 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.

4. 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 save 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", ...)

5. Show your work to the instructor. If you finish early you can start work on the homework assignment.