🚚 Data Transport

Overview

Look at this excellent little TODO app! 🤩 The code as provided implements these features:

Adding items to the todo list
listing the new item at the end of the existing to do list items
persist the todo items to localStorage as they are added to the to do list
load any todo items from localStorage when the page loads

Know what might be neato? I think it needs MOAR ... 🔔

Part 1: Sharable URLs - persistence /pəˈsɪst(ə)ns/

How could we view the same list on our phone as we are viewing on our laptop? Share the list with a friend?

TODO

There are // TODO comments in the javascript to guide you in your way while you add these features:

Modify the existing Get Sharable URL button so that it updates the url so that all of the todo items currently stored in localStorage are encoded in the query string in the browser's address bar.
Modify the existing code to notice it was passed a query string and to populate localStorage initially with the items in the query string

Part 2: Transportodon

What if there's more state in localStorage that will fit in a URL, or what if we would like to backup the state of our data in the app? Let's add a feature to export the data in localStorage as a file that can be downloaded and that can also be imported back into the app on the same or different browser (or computer) to repopulate the app's state from the file's data.

TODO

There are // TODO comments in the javascript to guide you in your way while you add these features:

Modify the existing Export button so that it downloads a JSON file that encodes all of the todo items currently stored in localStorage.
Modify the existing Import button so that it causes the file selected in the file field to be read and to populate localStorage with the items read from the file