OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to use localStorage to store data

  • Thread starter Thread starter Andrey Widjaja
  • Start date Start date
A

Andrey Widjaja

Guest
I'm currently trying to learn how to use localStorage. I find myself in a loop while trying to add/update an array of users.

Here's the code:

Code:
const users = [
    {name: 'john', age: 25,},
    {name: 'jane', age: 25},
    {name: 'bob', age: 8}
]


const newUserInput = document.querySelector('#newuser');
const newAgeInput = document.querySelector('#newage');
const addUserBtn = document.querySelector("#addnewuser");

addUserBtn.addEventListener('click', (event)=>{
    event.preventDefault();

   
    users.push(createUser(newUserInput.value, parseInt(newAgeInput.value)));
    localStorage.setItem('users', JSON.stringify(users));
   
})

const createUser = (name, age) => {
    return {
        "name": name,
        "age": age
    };
    

}

So when i createUser for the first time, it worked and the updated users get stored into localStorage. But when i did it the second time, instead of adding another user, it only updates the first user that i added. Also, even if this works like I wanted to, I'm thinking I might run into a similar problem when I refresh the page, because now I'm redefining users with the original 3 members at the start again.

Any inputs would be very appreciated.

<p>I'm currently trying to learn how to use localStorage. I find myself in a loop while trying to add/update an array of users.</p>
<p>Here's the code:</p>
<pre><code>const users = [
{name: 'john', age: 25,},
{name: 'jane', age: 25},
{name: 'bob', age: 8}
]


const newUserInput = document.querySelector('#newuser');
const newAgeInput = document.querySelector('#newage');
const addUserBtn = document.querySelector("#addnewuser");

addUserBtn.addEventListener('click', (event)=>{
event.preventDefault();


users.push(createUser(newUserInput.value, parseInt(newAgeInput.value)));
localStorage.setItem('users', JSON.stringify(users));

})

const createUser = (name, age) => {
return {
"name": name,
"age": age
};


}

</code></pre>
<p>So when i createUser for the first time, it worked and the updated users get stored into localStorage. But when i did it the second time, instead of adding another user, it only updates the first user that i added. Also, even if this works like I wanted to, I'm thinking I might run into a similar problem when I refresh the page, because now I'm redefining users with the original 3 members at the start again.</p>
<p>Any inputs would be very appreciated.</p>
 

Latest posts

Top