These exercises will give you experience with localStorage, ramping up in complexity.
Once you feel comfortable with it, try using localStorage in one of your own apps or
browser extensions, using one of the localStorage wrapper libraries.
As you're doing the exercises, make sure you use Chrome Dev Tools for debugging, the resources and console tab.
- Download catwalk.html and open it up. It should display a cat walking happily across the page.
- When the page loads, check if the information is stored in localStorage, and if so,
set the cat to that location.
- Download madlibs.html and open it up. It should have a form that outputs an exciting story when you enter values and submit.
Best Videos Ever...?
- Download youtube.html and open it up. It should display 3 of the most Amazing Youtube videos you've ever seen.
- Next to each video, put a thumbs up image and a thumbs down image, and default them both to a low opacity value. (You can use unicode from copypastecharacter.com or a custom font like font-awesome)
- When user clicks on one, raise the opacity to 1.0 and make sure the other one is still faded, so that there’s a visible thumbs up or thumbs down next to the video.
- Store what the user clicked for each video in localStorage, with a key for each video - like “2132132”: “up”
- When the page reloads, style the thumbs according to what’s in localStorage.