JavaScript刷新页面，但请保留创建的DOM元素

Question

我有一个项目，但是要使它工作，我每次创建一个新元素时都需要刷新页面。问题在于，当我刷新页面时，它也会删除创建的DOM元素。有没有办法重新加载所有内容，但是要保留DOM元素，直到您自己刷新页面？

    function BTN() {
        for (let i = 0; i < 7; i++) {
            let btn = document.createElement('button');
            btn.classList.add('btn')
            btn.id = 'Button' + i
            btn.innerHTML = 'Button' + i;

            document.getElementsByClassName('Btns')[0].appendChild(btn);
        }
    }

    document.getElementsByClassName('QPB')[0].addEventListener('click', () => {
        BTN()
    })

    .btn {
        width: 100px;
        height: 50px;
        background-color: red;
        margin-right: 10px;
    }

    .QPB {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        background-color: orange;
    }

<Button class="QPB">+</Button>
<div class="Btns">

</div>

因此，我需要刷新页面，但不要删除所有元素。有办法做到吗？