New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Retrieving list items

From: HTML5 Projects: Engaging Ecommerce

Video: Retrieving list items

It's time for the final step of our project. In the previous lesson, I showed you how ridiculously easy it was to save items in local storage. In this lesson, we'll cover how to retrieve and display them. Ao I have my dragdrop.js file where we put in the saveFaves routine last, and now let's bring in the loadFaves routine. So I'm going to put it at the tail end of the JavaScript code block here, not in any function, so it will run automatically when the page loads.

Retrieving list items

It's time for the final step of our project. In the previous lesson, I showed you how ridiculously easy it was to save items in local storage. In this lesson, we'll cover how to retrieve and display them. Ao I have my dragdrop.js file where we put in the saveFaves routine last, and now let's bring in the loadFaves routine. So I'm going to put it at the tail end of the JavaScript code block here, not in any function, so it will run automatically when the page loads.

So there is a call to loadFaves, and now let's put in that code itself. I'll make a little extra room there, so we can see what's happening. So it's function loadFaves curly brace pair. Now the first thing we want to make sure is that the function that we're trying to load exists. So we'll use an if statement, if (localStorage.get item) and then another curly brace and then another set of parentheses and quotes, and we want to check to see if the items favorites is the one that exists.

So if that exists--and let's put in another curly brace pair here--then what we want to do is get it and then assign what we get to the inner HTML of the unordered list, which we know as the variable the faves. So, it's theFaves.innerHTML = localStorage.getItem, and in parentheses, favorites, semicolon at the end and save, and that's it.

Let's check our work in the browser. I'll refresh the page. Now, let's scroll down, and let's say this time we want the eye, the $400, one of our favorites. It shows up in our list. And let's bring in rabbit as well. Okay, so I'm going to just copy this URL, and open up a new tab, paste it in, and hit Refresh, and then when I scroll down, there are my favorites. Well, congrats! Your ecommerce catalog is now greatly enhanced and totally engaging, with three interwoven HTML5-related technologies.

I'm sure your users will appreciate the upgrade to their experience.

Show transcript

This video is part of

Image for HTML5 Projects: Engaging Ecommerce
HTML5 Projects: Engaging Ecommerce

13 video lessons · 6473 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.