如何使用localStorage存储数据

Question

我目前正在尝试学习如何使用localStorage。我发现自己在尝试添加/更新用户数组时陷入了循环。

这是代码：

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

}

因此，当我第一次创建用户时，它起作用了，更新后的用户被存储到本地存储中。但是当我第二次这样做时，它没有添加另一个用户，而是只更新我添加的第一个用户。另外，即使这按照我想要的方式工作，我想当我刷新页面时我可能会遇到类似的问题，因为现在我正在重新定义用户与最初的 3 个成员。

如有任何意见，我们将不胜感激。

Answer 1

1. 使用“users”键从本地存储中获取现有项目。如果不存在，则使用您创建的用户对象数组。

   let users = JSON.parse(localStorage.getItem('users')) || [ {姓名：'约翰'，年龄：25}， {姓名：'简'，年龄：25}， {姓名：'鲍勃'，年龄：8} ];

2. 对于users使用let而不是const，这使得它可变或可修改，而不是使其不可变或不可修改。

希望这两个步骤有帮助。 TLDR：将您的 const 用户更改为步骤 1 中的代码