Update values in a LocalStorage array - React

Alien18 0
Viewed 39

I'm working with Marvel's API and in the project I'm working on, all the characters are displayed in the main page. I can click in a character and open a detail page, where I can see the character's information. I also available three text inputs with the name, image link and description, next to an update button. When I enter this page, I save to the local storage the character information. I want to be able to update the local storage information when I click the update button. To this point, I'm able to get all the information I need to update, but I just don't know how to update the local storage array. The object I'm saving in the local storage is something like this: {id: 'characterid', name: 'charactername', description: 'characterdescription', image: 'imagelink'}

             const [name, setName] = useState("");
              const [description, setDescription] = useState("");
              const [image, setImage] = useState("");
            
              useEffect(() => {
                  const hero = JSON.parse(localStorage.getItem("character"));
                  setCharacter(hero);
                  setName(hero.name);
                  setDescription(hero.description);
                  setImage(hero.thumbnail.path + "." + hero.thumbnail.extension);
              }, []);
            
            function updateCharacter() {
                console.warn("item", name, image, description);
              }
                
<input type="text" className="character_name" defaultValue={character.name} onChange={(e) => {setName(e.target.value);}}/>    
 
<input type="text" className="character_image" defaultValue={`${character.thumbnail.path}.${character.thumbnail.extension}`} onChange={(e) => {setImage(e.target.value);}}/>

<input type="text" className="character_description" defaultValue={character.description} onChange={(e) => {setDescription(e.target.value);}}/>

<button onClick={updateCharacter}>Update Character</button>

Thanks for the help!

local-storage reactjs arrays
1 Answers

This assumes the array you mentioned in localStorage is actually a JSON string comprised of an array of character. Something like this should work:

function updateCharacter() {
    
    // First get the array of characters into a javascript array.
    // NOTE: this assumes the keyName of the localStorage element is "characters"
    let characters = JSON.parse(localStorage.getItem("characters"));
    
    // We should now have an array of characters. 
    // Find and update our character in the array
    const updatedCharacters = characters.map(item => {
        if(item.id === hero.id) {
            return {id: hero.id, name, description, image};
        }
        
        return item;
    });
    
    // Finally update local storage
    localStorage.setItem("characters", JSON.stringify(updatedCharacters));
}

I haven't tested the code but hopefully you get the gist.

Just wanting to update the localStorage "character" item?

function updateCharacter() {
    localStorage.setItem("character", JSON.stringify({id:hero.id, name, description, image}));
}
Leigh.D0
Related