我正在学习 javascript 课程，我按照所有步骤操作，但一直出现此错误。
我已经在互联网上对此进行了大量研究，我查看了几篇帖子，其中说某些变量可能为 null ，但我已经使用了 console.log 和 alert，并且我看到所有变量都已填充。
我多次重写了页面，以查看是否遗漏了某些内容，但没有成功：

Uncaught TypeError: Cannot read properties of undefined (reading 'unshift')

这是我的代码：

const myModal = new bootstrap.Modal("#transaction-modal");
let logged = sessionStorage.getItem("logged");
const session = localStorage.getItem("session");
let data = {
    transactions: []
};

checkLogged();

document.getElementById("logout-button").addEventListener("click", logout);

document.getElementById("transactions-button").addEventListener("click", function () {
    window.location.href = 'transactions.html';
});

document.getElementById("transaction-form").addEventListener('submit', function (e) {
    e.preventDefault();

    const value = parseFloat(document.getElementById('value-input').value);
    const description = document.getElementById('description-input').value;
    const date = document.getElementById('date-input').value;
    const type = document.querySelector('input[name="type-input"]:checked').value;

    data.transactions.unshift({
        value: value, type: type, description: description, date: date
    });

    saveData(data);
    e.target.reset();
    myModal.hide();

    getCashIn();
    getCashOut();
    getTotal();

    alert("Lançamento adicionado com sucesso!");

});

function checkLogged() {
    if (session) {
        sessionStorage.setItem("logged", session);
        logged = session;
    }

    if (!logged) {
        window.location.href = 'index.html';
        return;
    }

    const dataUser = localStorage.getItem(logged);
    if (dataUser) {
        data = JSON.parse(dataUser);
    }

}

function logout() {
    sessionStorage.removeItem("logged");
    localStorage.removeItem("session");

    window.location.href = 'index.html';
}

function getCashIn() {
    const transactions = data.transactions;

    const cashIn = transactions.filter((item) => item.type === "1");

    if (cashIn.length) {
        let cashInHtml = ``;
        let limit = 0;

        if (cashIn.length > 5) {
            limit = 5;
        } else {
            limit = cashIn.length;
        }

        for (let index = 0; index < limit; index++) {
            cashInHtml += `
            <div class="row mb-4">
                <div class="col-12">
                    <h3 class="fs-2">R$ ${cashIn[index].value.toFixed(2)}</h3>
                    <div class="container p-0">
                    <div class="row">
                        <div class="col-12 col-md-8">
                        <p>${cashIn[index].description}</p> 
                        </div>
                        <div class="col-12 col-md-3 d-flex justify-content-end">
                        <span>${cashIn[index].date}</span> 
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        `

        }

        document.getElementById('cash-in-list').innerHTML = cashInHtml;
    }
}

function getCashOut() {
    const transactions = data.transactions;

    const cashOut = transactions.filter(item => item.type === "2");

    if (cashOut.length) {
        let cashOutHtml = ``;
        let limit = 0;

        if (cashOut.length > 5) {
            limit = 5;
        } else {
            limit = cashOut.length;
        }

        for (let index = 0; index < limit; index++) {
            cashOutHtml += `
            <div class="row mb-4">
                <div class="col-12">
                    <h3 class="fs-2">R$ ${cashOut[index].value.toFixed(2)}</h3>
                    <div class="container p-0">
                    <div class="row">
                        <div class="col-12 col-md-8">
                        <p>${cashOut[index].description}</p> 
                        </div>
                        <div class="col-12 col-md-3 d-flex justify-content-end">
                        <span>${cashOut[index].date}</span> 
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        `

        }

        document.getElementById('cash-out-list').innerHTML = cashOutHtml;
    }
}

function getTotal() {
    const transactions = data.transactions;
    let total = 0;

    transactions.forEach((item) => {
        if (item.type === "1") {
            total += item.value;
        } else {
            total -= item.value;
        }
    })

    document.getElementById('total').innerHTML = `R$ ${total.toFixed(2)}`;
}

function saveData(data) {
    localStorage.setItem(data.login, JSON.stringify(data));
}

n 这是我的 html 页面，我不知道，但可能是她吗？

<!DOCTYPE html>
<html lang="pt">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nikel - Codaí</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body id="app">
    <header>
        <nav class="navbar navbar-expand navbar-light bg-white">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <img src="./assets/images/nikel-small-logo.png" class="img-fluid" alt="nikel logo image" />
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                    <div class="d-flex menu">
                        <a href="home.html"><button class="btn" type="button"><i
                                    class="bi bi-house-door-fill fs-4 color-secondary"></i></button></a>
                        <a href="transactions.html"><button class="btn" type="button"><i
                                    class="bi bi-currency-exchange fs-4"></i></button></a>

                        <div class="dropdown">
                            <button class="btn" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i
                                    class="bi bi-person-circle fs-4"></i></button>
                            <ul class="dropdown-menu logout" aria-labelledby="dropdownMenuButton1">
                                <li><button id="logout-button" class="dropdown-item">Sair</button></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="container-lg">
            <div class="row">
                <div class="col-8 d-flex mt-4 justify-content-start align-items-center">
                    <div>
                        <i class="bi bi-cash-coin color-primary icon-detail"></i>
                        <span class="fs-2 bg-white" id="total">R$ 0,00</span>
                    </div>
                </div>
                <div class="col-4 d-flex mt-4 justify-content-end">
                    <div class="text-center">
                        <img src="./assets/images/coins-small.png" class="img-fluid" alt="coins image" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 info shadow-lg">
                    <div class="container">
                        <div class="row">
                            <div class="col-6"><span class="fs-4 align-middle">Entradas </span> <i
                                    class="bi bi-arrow-down-circle fs-2 align-middle"></i></div>
                            <div class="col-6"><span class="fs-4 align-middle">Saídas </span> <i
                                    class="bi bi-arrow-up-circle fs-2 align-middle"></i></div>
                            <div class="col-12 my-2">
                                <hr />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="container p-0" id="cash-in-list">

                                </div>
                            </div>
                            <div class="col-6">
                                <div class="container p-0" id="cash-out-list">

                                </div>
                            </div>

                            <div class="col-12 mb-4">
                                <button type="button" class="btn button-default" id="transactions-button">Ver
                                    todas</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn button-float" data-bs-toggle="modal" data-bs-target="#transaction-modal"><i
                    class="bi bi-plus"></i></button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="transaction-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Adicionar lançamento</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="transaction-form">
                        <div class="modal-body">
                            <div class="mb-3">
                                <label for="value-input" class="form-label">Valor</label>
                                <input type="number" step="any" class="form-control" id="value-input">
                            </div>
                            <div class="mb-3">
                                <label for="description-input" class="form-label">Descrição</label>
                                <input type="text" class="form-control" id="description-input">
                            </div>
                            <div class="mb-3">
                                <label for="date-input" class="form-label">Data</label>
                                <input type="date" class="form-control" id="date-input">
                            </div>
                            <div class="mb-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="type-input" id="type-input1"
                                        value="1" checked>
                                    <label class="form-check-label" for="type-input1">Entrada</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="type-input" id="type-input2"
                                        value="2">
                                    <label class="form-check-label" for="type-input2">Saída</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary button-cancel"
                                data-bs-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn button-default">Adicionar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="./js/home.js"></script>
</body>

</html>

我需要进行哪些更改才能解决此问题？任何帮助都值得赞赏。 我已经尝试了 bootstrap 包的降级版本。