javascript - 本地存储集项目替换而不是更新

Question

我尝试使用 setItem 将我的数据保存在本地存储中但是当我刷新 chrome 选项卡并将数据添加到我的数组时，localStorage 中的数据会删除旧数据并设置新数据，而不是更新旧数据。

这是我的代码:

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

Answer 1

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

例如

let users = [];

需要像

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

关键是您需要加载现有用户才能添加到他们，如果您不这样做，那么您实际上是在每次页面加载并将数据放入其中时创建新的用户数组。

您可能想要创建类似“loadData”的函数来检查数组是否已初始化，如果是则加载它，如果不是则创建它。您可以使其通用，以便您可以使用它来访问任何键并在键不存在时提供默认值，例如

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

然后

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