Exercises: LocalStorage

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.

Cat Walk

• Download catwalk.html and open it up. It should display a cat walking happily across the page.
• Modify the javascript so that it uses localStorage to store the the current location of the cat.
• When the page loads, check if the information is stored in localStorage, and if so, set the cat to that location.
• Now modify it to remember the direction that the cat is walking in, and remember that upon page load. Remember that localStorage stores strings, not JavaScript values, so be careful about what you're comparing to.

Mad Libs

• Download madlibs.html and open it up. It should have a form that outputs an exciting story when you enter values and submit.
• Modify the javascript so that it stores the generated phrases in localStorage and displays them on the page. Hint: you probably want to store all of the phrases in one key (“phrases”), and simply add to the value of that key when you see a new phrase.
• Modify the javascript so that it remembers when the user typed in the form, so that if they reload the page in the middle of entering the form, their input will still be there. Hint: use one key per answer, and think carefully about what event you should respond to. You don't want to slow down their typing!

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.