title: localstorage values resetting after refresh and localstorage is not defined
body: <p>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.</p>
  <p>I've written the code below</p>
  <p>//object</p>
  <pre><code>&quot;items&quot;: [
      {
        &quot;id&quot;: 119603782,
        &quot;node_id&quot;: &quot;MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=&quot;,
        &quot;name&quot;: &quot;react-contextual&quot;,
        &quot;full_name&quot;: &quot;drcmda/react-contextual&quot;,
        &quot;private&quot;: false,
       },
  {
        &quot;id&quot;: 119603782,
        &quot;node_id&quot;: &quot;MDEwOlJlcG9zaXRvcnkxMTk2MDM3ODI=&quot;,
        &quot;name&quot;: &quot;react-contextual&quot;,
        &quot;full_name&quot;: &quot;drcmda/react-contextual&quot;,
        &quot;private&quot;: false,
       }
  
      
  </code></pre>
  <p>Getting the object</p>
  <pre><code>export async function getServerSideProps() {
    const res = await fetch(
      &quot;https://api.github.com/search/repositories?q=created:%3E2017-01-10&amp;sort=stars&amp;order=desc&quot;
    );
    const data = await res.json();
  
    return {
      props: {
        data,
      },
    };
  }
  </code></pre>
  <p>This is my function</p>
  <pre><code>//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 !==  &quot;&quot;){
     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);
     
  
   } 
  }
  
  
  
  
      &lt;div className=&quot;grid grid-cols-3 rows-2 text-lg font-bold&quot;&gt;
           {storage}
      
      &lt;/div&gt;
  
  &lt;div className=&quot;grid grid-cols-3 grid-rows-2 gap-2 bg-black text-white border-white&quot;&gt;
          {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) =&gt; (
              
  
      &lt;button id=&quot;btn&quot; onClick={checkId} value={d.name}&gt;Favorite me &lt;/button&gt;
  
            
  </code></pre>