Локальное хранилище Предмет заменяет вместо обновления

Question

Я пытался сохранить свои данные в локальном хранилище с помощью setItem, но когда я обновил sh на вкладке 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

Вы загружаете пустой массив пользователей каждый раз, когда перезагружаете страницу, для решения этой проблемы вам необходимо заполнить массив пользователей из элементов, которые у вас есть в хранилище.

например,

let users = [];

должно быть что-то вроде

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

Ключевым моментом является то, что вам нужно загрузить существующих пользователей, чтобы иметь возможность добавлять к ним, если вы этого не сделаете, вы по сути создаете массив пользователей fre sh каждый раз, когда страница загружается и вы помещаете в нее данные.

Возможно, вы захотите создать что-то вроде функции «loadData», которая проверяет, инициализирован ли массив, загружает его, если он есть, и создает его, если он нет. Вы можете сделать этот шаблон c, чтобы использовать его для доступа к любому ключу и указать значение по умолчанию, если ключ отсутствует, например,

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

Answer 2

Другой вариант - изменить метод 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 поскольку он не имеет одинаковую емкость во всех браузерах, вы можете проверить этот пост для получения дополнительной информации