Javascript 本地存储集项替换而不是更新

我试图用

setItem

将数据保存在本地存储中，但当我刷新chrome选项卡并将数据添加到阵列中时，本地存储中的数据会删除旧数据并设置新数据，而不是更新旧数据

这是我的密码：

let capacity = 200;
let reservedRooms = 0;
let users = [];

let rsBox = document.getElementById('reservebox');

class Reserver {
    constructor(name , lastName , nCode , rooms){
        this.name = name ;
        this.lastName = lastName ;
        this.nCode = nCode ;
        this.rooms = rooms ;
    }

    saveUser(){
        if(this.rooms > capacity){
            console.log('more than capacity');
        }else{
            users.push({
                name : this.name ,
                lastName : this.lastName ,
                id : this.nCode ,
                rooms : this.rooms
            });
            capacity -= this.rooms ;
            reservedRooms += this.rooms ;
        }
    }

    saveData(){
        localStorage.setItem('list',JSON.stringify(users));
    }



}


rsBox.addEventListener('submit',function(e){

    let rsName = document.getElementById('name').value;
    let rsLastName = document.getElementById('lastname').value;
    let rsNationalCode = Number(document.getElementById('nationalcode').value);
    let rooms = Number(document.getElementById('rooms').value);

    //Save the user data
    let sign = new Reserver(rsName , rsLastName , rsNationalCode , rooms);
    sign.saveUser();
    sign.saveData();





    e.preventDefault();
});

---

每次重新加载页面时都会推送一个空的用户数组，要解决此问题，需要从存储中的项填充用户数组

e、 g

应该是这样的

let users = JSON.parse(localStorage.getItem('list')) || [];

关键的一点是，您需要加载现有用户才能添加到其中，如果不加载，则在每次加载页面并将数据放入其中时，您实际上都在创建新的用户数组

您可能希望创建类似“loadData”的函数，该函数检查数组是否已初始化，如果已初始化则加载，如果未初始化则创建。您可以将其设置为通用，以便使用它访问任何密钥，并在密钥不存在时提供默认值，例如

function loadData(key, def) {
    var data = localStorage.getItem(key);
    return null == data ? def : JSON.parse(data)
} 

然后

---

另一个选项是更改

saveData

方法，以便在应用程序加载时不必加载

localStorage

：

saveData(){
        let newList = JSON.parse(localStorage.getItem('list') || '[]')
        if(users.length) newList.push(users[users.length - 1]);
        localStorage.setItem('list',JSON.stringify(newList));
        newList=null;
}

---

注意：要小心使用localStorage，因为它在所有浏览器上的容量都不相同，您可以查看更多信息

非常感谢。我的问题解决了。我是javascript XD的noob

// load "list" - set to an empty array if the key isn't present
let users = loadData('list', []);

saveData(){
        let newList = JSON.parse(localStorage.getItem('list') || '[]')
        if(users.length) newList.push(users[users.length - 1]);
        localStorage.setItem('list',JSON.stringify(newList));
        newList=null;
}