как отображать данные из localStorage

const secretNum = Math.trunc(Math.random() * 20 + 1);

var score = 20;
let highScrore = 5
localStorage.setItem('number',highScrore)

const eventHandler = function () {
    const numInput = Number(document.querySelector(".number-input").value);
    


    if (!numInput) {
        document.querySelector(".guess-message").innerHTML = "Введите  число!";

    } else if (numInput === secretNum) {
        document.querySelector(".guess-message").innerHTML = "Правилно!";
        const body = document.querySelector('body').style.backgroundColor = '#00ff00'
        document.querySelector(".question").style.width = '50rem'
        
        const quests = (document.querySelector(".question").textContent = secretNum);

        if(score > highScrore){
            highScrore = score
            localStorage.setItem('score',JSON.stringify(highScrore))
            let localScoreGet = localStorage.getItem('score')
            localScoreGet = JSON.parse(localScoreGet)
            console.log(localScoreGet)
            if(localStorage.getItem('score')){
                const saveData = localStorage.getItem('score')
                const outData = document.querySelector('.highscore').textContent = localScoreGet;
            }
            
        }

    } else if (numInput > secretNum) {
        if (score > 1) {
        
            document.querySelector(".guess-message").innerHTML =
                "Большое Число!";
            score--;
            document.querySelector(".score").innerHTML = score;
        } else {
            document.querySelector(".guess-message").innerHTML =
                "Игра закончилась";
        }
    } else if (numInput < secretNum) {
        if (score > 1) {
            document.querySelector(".guess-message").innerHTML =
                "Маленькое Число!";
            score--;
            document.querySelector(".score").innerHTML = score;
        } else {
            document.querySelector(".guess-message").innerHTML =
                "Игра закончилась";
            document.querySelector(".score").textContent = 0;
        }
    }
};
 
const reload = document.querySelector('.again').addEventListener('click', function(){
    window.location.reload();
})
const checkBtn = document.querySelector(".check").addEventListener("click", eventHandler);

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 50%;
}

body {
    font-family: "Press Start 2P", sans-serif;
    color: #fff;
    background-color: rgb(0, 0, 0);
    /*  background-color: rgb(9, 250, 21); */
    user-select: none;
}

/* Layout Styles */
header {
    position: relative;
    height: 35vh;
    border-bottom: 7px solid #fff;
}

main {
    height: 65vh;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.left {
    width: 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2rem;
}

.right {
    width: 50rem;
    font-size: 2rem;
}

/* Elements Styles */
h1 {
    font-size: 3rem;
    text-align: center;
    position: absolute;
    width: 100%;
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.question {
    background: #fff;
    color: #000;
    font-size: 4rem;
    width: 25rem;
    padding: 2rem 0rem;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.between {
    font-size: 1.4rem;
    position: absolute;
    top: 2rem;
    right: 2rem;
}

.again {
    position: absolute;
    top: 2rem;
    left: 3rem;
}
button{
    border-radius: 10px;
}
button:active{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.number-input {
    background: none;
    border: 4px solid #fff;
    font-family: inherit;
    color: inherit;
    font-size: 5rem;
    padding: 2rem;
    width: 20rem;
    text-align: center;
    display: block;
    margin-bottom: 3rem;
    border-radius: 10px;
}

.btn {
    border: none;
    background-color: #fff;
    color: #000;
    font-size: 2rem;
    font-family: inherit;
    padding: 1rem 2rem;
    cursor: pointer;
    box-shadow: rgb(0, 57, 77) 0px 20px 30px -10px;
}

.btn:hover {
    /* background-color: rgb(218, 213, 213); */
}

.guess-message {
    margin-bottom: 2rem;
    height: 3rem;
}

.label-score {
    margin-bottom: 2rem;
}

@media (min-width: 320px) and (max-width: 375px) {
    main{
        flex-direction: column;
        justify-content: center;
        gap: 50px   ;
    }
    .right{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .right{
        width: auto;
    }
}

<!DOCTYPE html>
<html lang="en">
    <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"
        />
        <link
            rel="stylesheet"
            href="css/style.css"
        />
        <title>Hello World</title>
    </head>
    <body>
        <header>
            <h1>Угадай Число!</h1>
            <p class="between">(Между 1 и 20)</p>
            <button class="btn again">Сначала!</button>
            <div class="question">???</div>
        </header>
        <main>
            <section class="left">
                <input
                    type="number"
                    class="number-input"
                />
                <button class="btn check">Проверить!</button>
            </section>
            <section class="right">
                <p class="guess-message">Начни угадывать!</p>
                <p class="label-score">Очки: <span class="score">20</span></p>
                <p class="label-highscore">
                    Лучший результат: <span class="highscore">0</span>
                </p>
            </section>
        </main>

        <script src="js/app.js"></script>
    </body>
</html>