Devlog 7 — Saving My Tasks

Today I worked on the js/storage.js file of my TaskForge study planner.

Before this, my tasks were stored only while the webpage was open. If I refreshed the page, my tasks disappeared. I wanted to fix this.

What I added

• Added browser localStorage for TaskForge.
• Added a function to save my tasks.
• Added a function to load saved tasks.
• Made new tasks save automatically.
• Made completed/unfinished task changes save.
• Made deleted tasks stay deleted after refreshing.
• Added some checks for invalid or missing saved data.
• Added a function for checking how many tasks are saved.

What I learned

This was my first time using localStorage in this project.

I learned how to use:

• localStorage.setItem()
• localStorage.getItem()
• localStorage.removeItem()
• JSON.stringify()
• JSON.parse()

I also learned how two JavaScript files can work together. The storage file handles saving and loading, while tasks.js manages the actual tasks.

Testing

I added a few study tasks and refreshed the page to check if they were still there.

I also tested completing a task and refreshing the page. I checked deleting a task too.

While connecting storage.js with tasks.js, I had to make a few changes so the saved task data was loaded correctly.

Now my TaskForge tasks can stay saved even after refreshing the website.