Design comparison
Solution retrospective
This was such a fun project to work on. I however need to store data in local storage so that when a user generates advice. When they come back to the page they will take from where they left from rather than seeing the default #1 advice which I have put. Any advice on how to do it In a simpler manner will be appreciated. Thank you and happy coding
Community feedback
- @amalkarimPosted almost 2 years ago
Hi again, Carol
It's quite simple to store data in a local storage. In your
sandbox.js
file, add this code just before thecatch
block:localStorage.setItem('lastAdviceId', userid); localStorage.setItem('lastAdviceText', useradvice);
It will store the current
useradvice
anduserid
variables which we could get later.Then, when the page is loaded, we need to retrieve those two variables (if available) and write it on the page. Add this code below:
window.onload = function() { const advice= document.querySelector('.advise'); const generateAdvice= document.querySelector('.advisegenerated'); if (localStorage.getItem('lastAdviceId')) { generateAdvice.innerText= `"${localStorage.getItem('lastAdviceText')}"` advice.querySelector('span').innerText= `#${localStorage.getItem('lastAdviceId')}`; } }
Please remember though, that
localStorage
will still store the data even after the browser is closed. You can read about it and its alternative storage in this w3schools article.Alternatively, we could run the function that get the advice from adviceslip.com and render them in the page at
window.onload
, thus you don't need to write "default #1 advice" from the start.Hope this helps. Happy fun coding!
Marked as helpful1@CarolkiariePosted almost 2 years ago@amalkarim This has definitely helped. Thank you so much.
0 - @fazzaamiarsoPosted almost 2 years ago
Hello Caroline! Great work!
Here is my way on saving the data to local storage. I did a bit of refactor.
const getAdvice = async (adviceId) => { const params = adviceId === undefined ? 'advice' : `advice/${adviceId}` const base= `https://api.adviceslip.com/${params}`; const response = await fetch (base); return response.json() } const getFromLocalStorage = () => { return localStorage.getItem("adviceId"); } const saveToLocalStorage = (adviceId) => { return localStorage.setItem("adviceId", adviceId); } const updateAdvice = (slip) => { const advice= document.querySelector('.advise'); const generateAdvice= document.querySelector('.advisegenerated') // output the id of advice on the dom const useradvice = slip.advice; const userid = slip.id; generateAdvice.innerText= `" ${useradvice}"` advice.querySelector('span').innerText= `#${userid}`; } // fetch when first loaded document.addEventListener("DOMContentLoaded", () => { const savedAdviceId = getFromLocalStorage(); getAdvice(savedAdviceId).then(response => { updateAdvice(response.slip); }) }) // click event const icon = document.querySelector('.icon'); icon.addEventListener('click',()=>{ getAdvice().then((response)=>{ updateAdvice(response.slip); // save here saveToLocalStorage(response.slip.id) }) })
I hope it helps! Let me know if there are any problems! Cheers!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord