To-do: the wrong approach - again...(localStorage)

Things I've worked on/completed since my last post…

I’ve been working on implementing local storage for the To-do project.

Issues I had…

Git problems: trying to go back to saved files in VS code, creating a new branch to try something for localStorage - trying to be careful with resets etc as this caused me a long time delay earlier in the project. I only know the parts of git that I need to use - i.e. I’m not an expert

I again had the issue of having unexpected results when I added a parameter to a function, but forgot to add the corresponding one to the function when attached to an event listener elsewhere. I only found this error by console logging the element I was trying to manipulate and seeing that the reference to it in the debugger was a different elements, so obviously this displaces things somehow.

Trying to implement code to add DOM elements for local storage was hard - I tried to turn my exisiting code into a function to use, which casued many scoping problems, which I was struggling to fix for a while.

As I was experimenting with things trying to implement localStorage, I realised that my DOM was being rendered using an array of stored DOM elements (whose data was previously populated by the data array), whereas I would be using a data object for local storage. I realised that this was probably a fundamental design flaw(!), but I just did it in the first way that came to me initially, not taking local storage into account as I had no experience with that previously.

I decided that I needed to alter my current structure to build the DOM from a data object, rather than building from an object containing DOM elements. This was tricky at first, but I eventually managed to do it. I then had a number of issues with removing the correct childNodes, which was frustrating, but the solution was to just step back and go through everything slowly with the debugger.

Things that went well...

I (sort of) figured out how to set/get things from local storage and how to serialize and de-serialize the data (converting to strings to save to local storage and then converting those strings back to objects when necessary).

I had a minor issue with some IIFEs, but just did some experimenting with my own basic functions to figure out the answer, which I got in the end.

As I completely took time pressure off myself, I am not as phased now when something goes wrong and am just working through it bit-by-bit - thankfully, I do not find ‘going wrong’ as overwhelming as I did earlier in the course.

Things I've learnt/need to improve on...

Even though it caused me a lot more problems which I needed to fix, I am glad that figured out that the way I had built my DOM initially was probably something to avoid in future as it seemed not to be the ideal way when it comes to dealing with local storage, so hopefully I can keep this in mind for future projects.

Plan for the forthcoming week...

I hope to finish local storage, but we’ll see…

At the moment of writing, I am trying to now fix my edit and delete function for the new structure I implemented as detailed above.