Issue calling different values from local storage

Question

I have 3 different values stored in local storage which are name, id and img I cannot seem to call the values individually.

      {Object.entries(localStorage).map(([key, value]) => {
        return <p>{value}</p>;
      })}

This will return all 3 values.

if I try something like

      {Object.entries(localStorage).map(([key, value]) => {
        return <p>{value.name}</p>;
      })}

then it returns nothing. same for .id or .img

the reason I'm not using something like let name = localStorage.getItem('name') is where the local storage is being set there is a counter that will add a 1 to each value ie name1, name2 and so on each time so that multiple values can be stored with a similar key, value structure so I can map through them all and then display them all.

any feedback is appreciated.

Answer 1

You can only store strings in local storage. So if you are storing a stringified json, you will need to parse it to be able to access its properties.

So try

{
  Object.entries(localStorage).map(([key, value]) => {
    const parsedValue = JSON.parse(value);
    return <p>{ parsedValue.name }</p>;
  })
}