[Lefseq]

Здравствуйте. Имеется код, который запоминает в куках браузера введенные пользователем имя и фамилию. Затем перенаправляет на страницу (page2.html), где выводит указанные пользователем имя и фамилию.

Но данный код выводит данные из инпутов имя (name) и фамилия (family-name) в одну строчку, а как сделать, чтобы выводились на странице page2.html по отдельности, (например <span class="name"></span> и <span class="family-name"></span>, чтобы можно было поставить их в разные части страницы. Как это сделать? Помогите пожалуйста.

<section id="user-greeting">
    <form>
        <label>
            Имя
            <input type="text" autocomplete="name" name="name" required>
        </label>
        <label>
            Фамилия
            <input type="text" autocomplete="family-name" name="family-name" required>
        </label>
        <button onclick="location.href='https://site.ru/page2.html'">Запомнить</button>
    </form>
    <section>
        Привет, <span class="name"></span>, добро пожаловать на сайт!
        <button id="user-greeting-forget-button">Забудь обо мне!</button>
    </section>
</section>

(function main() {
        var form = document.querySelector("#user-greeting > form");
        var section = document.querySelector("#user-greeting > section");
        
        function changeView() {
            if ("name" in localStorage) {
                form.style.display = "none";
                section.style.display = "";
                document.querySelector("#user-greeting .name").textContent = localStorage.name;
            } else {
                section.style.display = "none";
                form.style.display = "";
            }
        }
        
        form.addEventListener("submit", function(event) {
            event.preventDefault();
            var data = new FormData(form);
            localStorage.name = [data.get("name"), data.get("family-name")].join(" ");
            changeView();
        });
        
        document.getElementById("user-greeting-forget-button").addEventListener("click", function() {
            delete localStorage.name;
            changeView();
        });
        
        changeView();
    })();