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

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')) || [];

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

您可能想要创建类似“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', []);