This challenge i faced when i was working on my first data driven modular project called Quote Gallery (SPA).
I created everything from folder structure and routing system to connecting home page with that quotes storage file. Now the next task was to show that quote and it's author name equally and at same time on another two pages of this app, quote page & author page, right after user entered & specified the category in quote search bar,
I spended my whole day in just figuring out that, how i will do it, how will i create that fluid data driving system, that will flow data automatically right after user clicked "Show Me".
I tried many things, like i try creating functional system, importing that quote page and author page functions and quote storage file here in home page, user will click that show me button and it will send that input data to that imported storage file and it will check whether that category entered by user is exists or not, if exists, author and quote page's imported functions will take that quote data with its author name, and they will present it in their pages, and it simply doesn't work...
I tried this method again and again, even with different approaches, but nothing worked. Then i asked chatgpt about it, about how can i show data simultaneously right after user clicked "Show me". It helped me a little by telling me about some ideas and methods i can follow to create this kind of system..
One method that chatgpt told me, it was about using localstorage, although previously i was tried that method, but then there's mistake i did, i used Arrays in localstorage, and it becomes the reason for the failure, and i can't be successful in creating that data driving system..., i left that method.
but now, one thing get click to my brain. and that was ---- instead using localstorage this way...
const quotedata = JSON.parse(localStorage.getItem("quotedata")) || {};
Now i write localStorage this way On that quote storage file,
For quote:
localStorage.setItem("quote", thatQoute);
For author:
localStorage.setItem("author", thatAuthor);
Now if that quote exists, it will get saved in this localStorage, these will save that quote and it's author data separately. I will call this localStorage data from author & quote pages. like,,
localStorage.getItem("author");
localStorage.getItem("quote");
And present them,
It worked, after trying this idea, my app started working just as i expected it to work.
And finally, i successfully created that fluid data driving system in my first Data-Driven SPA (Quote Gallery). Now, if you don't understand this, or my explanation didn't help you in any way. You wanted to learn and understand it by looking at that code, like how i actually defined that localStorage system.
Top comments (0)