🚀 Space Dashboard — Saving Notes with localStorageToday I worked on making the sticky notes in my Space Dashboard persistent.Before this, I could create NASA photo notes and drag them around, but whenever I refreshed the page, all the notes disappeared.💾 What I addedI implemented localStorage so the dashboard can remember the notes even after refreshing the page.For each note, I now save:📸 The NASA photo URL📍 The note’s position📝 The note’s shape/classI created a saveNotes() function that collects the information from every sticky note and stores it in the browser’s localStorage.I also added a restore system that runs when the page loads. It reads the saved notes, recreates them, restores their positions, and makes them draggable again.🖱️ Dragging + SavingI kept the existing drag system and connected it to the save function. Whenever I move a note, its new position is saved.This means I can:Add a NASA photo noteDrag it anywhereRefresh the pageGet the note back in the same position 🎯🧠What I learnedThis part taught me more about:localStorageJSON.stringify()JSON.parse()datasetSaving JavaScript objectsRestoring DOM elements after a page reloadConnecting multiple features together✅ ResultThe Space Dashboard now remembers my NASA sticky notes instead of losing them every time the page refreshes.This makes the dashboard feel much more like a real usable application rather than just a temporary webpage.
lwk this time no ss TT
Comments 0
No comments yet. Be the first!
Sign in to join the conversation.