Exercise: IndexedDB and Memes
- Download memegen.html and save into your project folder.
- Open it up and make sure it works. It should display the most amazing meme generator you've ever seen.
Unfortunately, it currently saves memes in a javascript object, so when your page reloads, they will all be gone.
Oh no!
- Add code to the page that will set up an object store to save the memes, with a non-unique index on the "type" attribute. (See the slides)
- Write a function that will save a meme to the database, and call that instead of storing the meme in the local object. (See MDN article.)
- Write a function that will fetch all the current memes from the database and add them to the list when the page loads. (See MDN article).
- Reload your page and rejoice!
- Bonus: add a dropdown to filter by meme type, doing an indexed query on the database.