CODEWITHSUNDEEP
javascriptarraysreactjsnext.jslocal-storage
someone
someone

Reputation: 703

localstorage values resetting after refresh and localstorage is not defined

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>

Upvotes: 2

Views: 12472

Answers (4)

Anirban Baisya
Anirban Baisya

Reputation: 111

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

Upvotes: 0

someone
someone

Reputation: 703

This was the answer

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

Upvotes: 0

sagat
sagat

Reputation: 1406

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

Upvotes: 0

Someone Special
Someone Special

Reputation: 13588

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

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

Upvotes: 1

Related Questions