My array and local storage keep resetting after every refresh. I've seen some answers like I need to parse the data and then stringify it. The issue I've faced is I keep getting an error message saying 'local storage is not defined' and an internal server error 500.
I've written the code below
//object
"items": [
{
"id": 119603782,
"node_id": "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
"name": "react-contextual",
"full_name": "drcmda/react-contextual",
"private": false,
},
{
"id": 119603782,
"node_id": "MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=",
"name": "react-contextual",
"full_name": "drcmda/react-contextual",
"private": false,
}
Getting the object
export async function getServerSideProps() {
const res = await fetch(
"https://api.github.com/search/repositories?q=created:%3E2017-01-10&sort=stars&order=desc"
);
const data = await res.json();
return {
props: {
data,
},
};
}
This is my function
//trying to keep the values after a page refresh
const favs = JSON.parse(localStorage.getItem('name')) || [];
//localstorage is not defined
//define it here
const storage = typeof window !== 'undefined'? localStorage.getItem('name') : null
//check for value then store it in array and to local storage
function checkId (e) {
if(e.target.value !== ""){
favs.push(e.target.value)
//check if it exists
localStorage.getItem('name') === null
//if exists store it
localStorage.setItem('name', JSON.stringify(favs))
console.log(favs);
}
}
<div className="grid grid-cols-3 rows-2 text-lg font-bold">
{storage}
</div>
<div className="grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white border-white">
{data.items
.sort(function (a, b) {
return new Date (b.created_at) - new Date(a.created_at) || a.stargazers_count - b.stargazers_count
})
.map((d) => (
<button id="btn" onClick={checkId} value={d.name}>Favorite me </button>
You are calling localStorage at wrong places, Even though you used type of window !== 'undefined', you are already calling const favs = JSON.parse(localStorage.getItem('name')) beforehand.
Assuming this is a React component. You can get the localstorage in a useEffect call.
const Component = () => {
const [ fav,setFavs ] = useState([]);
useEffect(() => {
if (typeof window !== 'undefined') { //necessary because u are using nextjs
const storage = localStorage.getItem('name');
if (storage) {
setFavs(JSON.parse(storage));
//favs will be populated with your localStorage once, on component mount.
}
}
},[])
const checkId = (e.target.value) => {
const value = e.target.value;
if (!value) return;
const newFavs = [...favs, value]
localStorage.setItem('name', JSON.stringify(newFavs));
setFavs(newFavs);
}
.....
return (<pre>{ JSON.stringify(favs, null, 4)}</pre>)
}
If you want your favs to be unique (values not repeated) then instead of
const newFavs = [...favs, value]
Change it to
const newFavs = [...new Set([...favs, value])]
This was the answer
const favs = typeof window !== "undefined" ? JSON.parse(localStorage.getItem('name')): null || [];
What you need to do first is setting the item in localstorage:
function setItem(key, item) {
localStorage.setItem(key, JSON.stringify(item));
}
now after you refresh the page you can retrieve it from the localstorage:
function getItem(key) {
const item = localStorage.getItem(key);
return JSON.parse(item);
}
That should be it. Also make sure you are not in inkognito mode on the browser, which might reset the storage on reloading the page.
To clarify furthermore your script would look something like this:
const myTestItem = 'test item';
function setItem(key, item) {
localStorage.setItem(key, JSON.stringify(item));
}
function getItem(key) {
const item = localStorage.getItem(key);
return JSON.parse(item);
}
setItem('test', myTestItem);
// after reload you can check wether it's there.
console.log(getItem('test')); // <-- just to log it to console, also u could check the application tab in chrome console and check the localstorage.
React Example in codesandbox:
regards