Client-side Storage

In this lab, you will implement five functions that are used to modify and store existing data about a collection of movies. These functions are built on top of an animated data visualization that creates and modifies a bar chart. You will only need to modify the data.js file to implement these functions. Consulting the index.html file would be helpful to understand the form structure, while data.json shows the structure of the movie objects.

Starting Code

Start by downloading and extracting the source code in this ZIP file:

lab11.zip

There are three source code files: index.html, data.js, and data.json. You will only need to modify data.js. There are an additional two image files that you can use for testing purposes.

Step 1: Working with the movie objects

This step is very similar to work from the previous labs. When the user clicks on a bar in the bar chart, the event calls the launchModal function. In this function, you will need to copy the relevant data from the movie object (the item parameter) into the form fields. Then, when the user clicks the "Save Changes" button in this form, updateMovie will be called to update the movie object.

You will also implement the initial version of loadMovieData to retrieve data.json using a call to fetch. This data will then be used to build the bar chart by passing the parsed data as an object to buildDefaultGraph.

Step 2: Using `localStorage`

The first step only allows you to keep the changes until the page reloads. Once that happens, the original data in data.json will be retrieved again. In this step, you will change that.

You will start by updating the updateMovie function to store a string version of movie objects into localStorage. You will then update loadMovieData so that it first tries to load the data from localStorage instead of using fetch. If the data has been stored locally, use JSON.parse to parse it and build the graph. If not, then you can call fetch to get the default data set.

Finally, add the single line of code to clearStorage so that it will remove the data from localStorage.

See the MDN documentation for information about localStorage.

Step 3: IndexedDB

In this final step, you will use IndexedDB to store a database of image files for the various movies. Start by completing the code in openDatabase and upgradeDatabase based on the comments. Next, complete the code in addDatabaseEntry to store or update an object in the object store. THe object store will use the object's movieId field for the key.

Next, complete the code in uploadFile and showImage to upload and display an image. When a file is uploaded during a form submission, you can use this code to get the file contents (note that it doesn't matter what kind of file it is):

const reader = new FileReader();
reader.readAsDataURL(form.field.files[0]);
reader.onload = ev => {
  // ...ev.target.result is the uploaded file; do something with it
}

Now that uploadFile should return a Promise that processes the file data.

Finally, update showImage function so that it queries the database based on the current movie ID. This function will be called whenever the modal is shown, and the movie ID is passed as its argument. If the query for the ID is successful, update form.posterImage.src to be the movie poster's image from the database.

Submission

Submit just the data.js file to Canvas.