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(
    ":%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>

          

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./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>

          

• javascript
• arrays
• reactjs
• next.js
• local-storage

• u mented the setItem(key, value) function? – sagat Commented Feb 6, 2022 at 13:30
• no, just on stackoverflow to add clarity in vscode its not there. – someone Commented Feb 6, 2022 at 13:41
• i've added the object now and the elements that are calling the function. – someone Commented Feb 6, 2022 at 19:23

4 Answers 4

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 ponent. 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 ponent 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>)
}

Bonus

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])]

Reference on Set

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:

Codesandbox

regards

This was the answer

const favs = typeof window !== "undefined" ? JSON.parse(localStorage.getItem('name')): null || [];

This is my solution for this Question :-

//you can use also  typeof window !== "undefined"  insted of  process.browser
const favs = process.browser ? localStorage.getItem('name') : null ; //necessary because u are using nextjs


useEffect(() => {
        if (process.browser) {
            setFavs(JSON.parse(favs || '""') || '')

 }
}, [favs])