Skip to content

Commit

Permalink
Merge pull request TheOdinProject#25975 from hebiscus/patch-3
Browse files Browse the repository at this point in the history
Project: Todo List: Add LocalStorage Devtools tip
  • Loading branch information
Carlos Diaz authored Jul 28, 2023
2 parents 3ab2096 + c28c9f4 commit 3aa91a3
Showing 1 changed file with 1 addition and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ Before diving into the code, take a minute to think about how you are going to w
8. We haven't learned any techniques for actually storing our data anywhere, so when the user refreshes the page, all of their todos will disappear! You should add some persistence to this todo app using the Web Storage API.
1. `localStorage` ([docs here](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)) allows you to save data on the user's computer. The downside here is that the data is ONLY accessible on the computer that it was created on. Even so, it's pretty handy! Set up a function that saves the projects (and todos) to localStorage every time a new project (or todo) is created, and another function that looks for that data in localStorage when your app is first loaded. Additionally, here are a couple of quick tips to help you not get tripped up:
- Make sure your app doesn't crash if the data you may want to retrieve from localStorage isn't there!
- You can inspect data you saved in LocalStorage using DevTools! To do this, open `Application` tab in DevTools and click on Local Storage tab under `Storage`. Every time you add, update and delete data from LocalStorage in your app, those changes will be reflected in DevTools.
- localStorage uses [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) to send and store data, and when you retrieve the data, it will also be in JSON format. You will learn more about this language in a later lesson, but it doesn't hurt to get your feet wet now. Keep in mind you *cannot store functions in JSON*, so you'll have to figure out how to add methods back to your object properties once you fetch them. Good luck!

</div>
Expand Down

0 comments on commit 3aa91a3

Please sign in to comment.