JavaScript DOM Scripting By Example Improving the Application Code Next Steps

<noob />
<noob />
16,316 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

Steven Parker
Steven Parker
173,943 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 />
16,316 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
173,943 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
173,943 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.

<noob />
<noob />
16,316 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
173,943 Points

I added another comment to my answer.

Steven Parker
Steven Parker
173,943 Points

bot .net — Has your original question been resolved?

<noob />
<noob />
16,316 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