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.

This lab is in the process of being updated. You should NOT complete the lab as described here. New instructions will be posted later.

Starting Code

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

lab12.zip

There are three source code files: index.html, data.js, and data.json. You will only need to modify data.js.

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 into the form. Then, when the user clicks the "Save Changes" button in this form, updateMovie will 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.

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 updated the updateMovie function to store a string version of movie objects into localStorage. Note that you should only store the movies that are currently shown in the bar chart (i.e., the selectedData global array), which is a subset of the full movie list (jsonData).

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: Data exporting

In the final step, you will implement the exportData function to allow the user to download a JSON file of the currently shown movie data. The slides (posted on Canvas) contain sample code for using a Blob to create a download file.

In this step, when you call JSON.stringify, you will pass three arguments. The first argument is the data set to export. The second argument, which is called the "replacer" parameter, is an array of data fields that you want to include in the export. That is, we are not downloading all of the movie fields, just the title, rating, and year. The third argument is 2 to indicate the number of spaces to use for indentation when formatting the data.

Submission

Submit just the data.js file to Canvas.