Course Project, Part One — Save a User’s Gallery Position Using Functions
Save a User’s Gallery Position Using Functions
About this project
your image gallery project.
the user’s browser. You can use this functionality to remember a state so that we can restore
that state when the user returns to the page. To improve the user experience of the image
gallery, you will update your gallery program to save the user’s last viewed image so that they
are presented with that same image when they return to your gallery.
Review the Documentation and Code
First, familiarize yourself with the localStorage API.
Now that you have a general idea of how the API works, you decide to take a look at the
function that your colleague has written. Take a look at interactivity.js and trace through each
line in the loadSavedImage function (starting on line 39), making note of the function’s inputs,
processing, and outputs by adding comments directly into the code.
As mentioned earlier, your goal is to leverage the localStorage library to save a user’s place in
the gallery. Another developer has already written a function loadSavedImage to load the
saved image from localStorage.
When a user clicks a thumbnail in the gallery, your program should save a reference to that
image, an associative array that contains the image’s information (i.e., ID, path/filename, and
description), to localStorage. It is important to note that you are not actually saving the image
itself but rather a reference to the image as described above.
When initially loading the main image, your program should no longer automatically set the
main image to the first image in the array. Rather, if a reference to an image is saved
in localStorage, your program should load the referenced image to the main gallery elements.
Otherwise, your program should default to loading the first image in the array.
Take a look at the pseudocode plan below for a concise description of the necessary steps.
Define a function, loadSavedImage(), that loads a reference to an image from
Retrieve a reference to the stored image from localStorage and store it in a variable.
Set the main gallery elements (mainImage and mainDescription) using the variable.
Add the “selected” CSS class to the corresponding thumbnail.
In the loop that populates the thumbnail ribbon:
Store the currentImage in a variable.
Create the thumbnail element and set its attributes.
Add a “click” event listener to the thumbnail.
Remove “selected” CSS class from all thumbnails.
Add the “selected” CSS class to current thumbnail element.
Set the mainImage to this image.
本网站支持淘宝 支付宝 微信支付 paypal等等交易。如果不放心可以用淘宝交易！
E-mail: firstname.lastname@example.org 微信:itcsdx