Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript DOM Scripting By Example Improving the Application Code Next Steps

Posted by <noob />
<noob />
17,062 Points

How i even start to implement the localStorage challange here?

Hi, so far i implemented the duplicate names challnage and dealing with a blank entry.

I watched the localStorage workshop but i still can't figure out and even know how to add this feature to our existing app.

so far this is what i have done: https://w.trhou.se/whf9cxh4qi

I will really appreciate any guides

It's in a file called refactor.js

3 Answers

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

Hey steven where exactly in the code i need to use this lines? i'm having a really hard time to understand where to put them and how it actually work current snapshot: https://w.trhou.se/h7c7kz7fxi

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I added another comment to my answer.

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

bot .net — Has your original question been resolved?

<noob />
<noob />
17,062 Points
<noob />
<noob />
17,062 Points

im working on the practice project, can u take a look at it? i practice it in there

https://teamtreehouse.com/community/help-with-adding-a-local-storage-to-my-practice-project

Steven Parker

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

The original project you borrowed from was designed to to store and retrieve an array, so you could simplify the functions a bit. All you need here is to store and re-load the innerHTML of the list element. Also, notice that "getStoredListItems" needs to use getItem instead of setItem (line 23).

And you could store it anytime an item is added, removed, or edited. Then, when the JS is first loaded, if there's anything currently stored, stick it into the UL's innerHTML property.

<noob />
<noob />
17,062 Points

Steven Parker

hey steven, i fixed the problem in line 23 but i dont understand what u suggested, what do u mean by store the li? can u show in code? this is the current snapshot

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

I didn't see the "current snapshot" link, but just using the primitives you could store the list items like this:

  localStorage.setItem("storedItems", ul.innerHTML);  // put all the list items in local storage

And when the program starts, you could reload them:

ul.innerHTML = localStorage.getItem("storedItems");  // restore the saved list items
Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You might put the storage line (with "setItem") any place the list gets changed. For example, on line 175 at the end of the submit handler. And you'd also want to store when you edit items or remove them as well (I'll leave that to you).

And the load line (with "getItem") could just be the last thing in the script (after line 227).

But this is a very rough example. These primitive calls don't do any of the nice things in the functions like check to see if local storage is available, or check that something is currently stored before loading the list. Yet they are enough to demonstrate how the list can be preserved across page refreshes. You can even go to another site and when you come back all the data will re-appear.

Understanding is the key to being able to use these techniques on your own code. You might want to try using these techniques on simpler examples first to get comfortable with how they work.