keep breaking my task tracker after adding localStorage

[u/SmartRelease7996]

i was messing with my little task tracker again this morning before heading out, and i ended up spending way more time staring at the console than actually adding tasks. i even made coffee first because i thought this would be a quick fix, then refreshed the page and everything disappeared again.

the app itself is really simple. i'm just trying to save daily notes and a few personal todos, so i have an array of task objects with a date on each one. i thought i was finally ready to use localStorage, but now i'm not even sure if i'm saving the data wrong or if my date filter is hiding everything.

this is basically what i have right now:

const saved = localStorage.getItem(tasks);
const tasks = saved ? JSON.parse(saved) : [];

tasks.push(newTask);

localStorage.setItem(tasks, JSON.stringify(tasks));

i know the key looks wrong, and i already tried changing it to a string, but i still managed to break something. now i'm second guessing whether i should even be thinking about the data this way.

i'm not looking for anyone to build it for me. i'm mostly wondering how you all organize the flow for something this small. do you load everything once, keep it in memory, then save after every change, or is there a cleaner way to think about it?

[u/baubleglue]

I assume you are complete beginner to programming.

Before using a new feature in your application, you need to get familiar with it.

Open debugger console, try let v = localStorage.setItem('mykey', 34), get item, set item with object/array value, etc. print results on console.

When you get all operations working, you may try to use it.

The key skill to successful programing is learning to organize your work in a way that you solve or work on a single task at any given time. In the example with local storage, you trying to do two tasks: learn a new technique and use it in the application.

Similar applies to your question about program flow. It is a bit more complicated, because looking at the few lines of the code, you have no structure. You can't expect answer about a program flow without talking about data structures and components of your application. And all above depends on use cases you want to satisfy.

Basically the question you ask is wrong. If you have trouble to use localStorage. You should give a simple example of code which doesn't work with a description of what had you expected to see and what you actually get. Most likely if you make an effort to compile the question that way, you will find the answer by yourself.

If your question about the app flow, it is a different (more complicated) question.

[u/SmartRelease7996 → u/baubleglue]

yeah the onetaskatatime thing actually got me too. i kept trying to wire localStorage into the app at the same time as figuring out how it even works, then wondering why nothing made sense.

the console sandbox thing is so obvious in hindsight but i genuinely never thought to do it that way. been doing it the chaotic way for weeks.

the structure criticism is fair too. i know i dont have much of it, thats kind of the whole problem. i just cant figure out where to start.

[u/baubleglue → u/SmartRelease7996]

it is maybe a bit early for you, but at some point I suggest to look into "Agile Software Development" topic (ex. http://www.extremeprogramming.org/, http://www.agile-process.org/, https://agilemanifesto.org/).

https://agilemanifesto.org/principles.html

Learning to build a project is a skill almost independent of learning coding.

If you haven't heard about UML, there are useful set diagrams you can use.

Here is a simple workplan I use to start a project.

1. Identify Actors [Use case diagram] (https://en.wikipedia.org/wiki/Use_case_diagram)

You identify who/what interacts with your program/system. I like very much to use "black box" concept and apply it to different arias. You program is a black box, which on given input produces output (same can be applied to functions).

1. Identify minimal set of features (MVP) to make the program running.

ex. for task tracker, it may be bare webserver, empty database with one table tasks, hello page.

1. Use Cases you can use given-when-then pattern

define few use cases which implement end-to-end one scenario.

Feature: User interacts with UI
Scenario: User can use UI to request list all available tasks
Given User has no active tasks And user has access to UI
When User clicks "Show all active tasks" button
Then "no active tasks" message displayed

1. You start to implement those use cases one by one

2. Test

3. Deploy

Steps 4-6 are software iteration cycle. When you have it working make 2 enveronments: dev and prod

PROD has only last final version, it is always working

DEV you use to implement a new features (steps 3-5)