Как в js сделать отображение данных на другой странице

Как в js сделать так, чтобы при введении данных в форму регистрации на одной странице, эти данные (ФИО) появлялись на другой странице У меня есть страница с формой регистрации, и когда учитель регистрируется, то его ФИО добавляется в скролбаре. На другой странице я сделал скролбар, в нем блок с классом container_theachers и в нем будут появляться блоки с одинаковым классом teacher(когда зарегистрировался новый учитель). Вопрос заключается в следующем: как сделать чтобы с каждым новым зарегистрированным учителем добавлялся блок с классом teacher и чтобы в нем в тег 'p' (с классом teacher_name-name) добавлялись ФИО учителя(слева будет иконка а справа ФИО) вот фотка как должно выглядеть, код формы и скролбара.

<form action="" method="post" id="main_form">
                <h1>Registration</h1>
                <div class="div_margin">
                    <label class="main_labels" id="" for="name">Имя:</label><br>
                    <input class="main_inputs" type="text" name="name" placeholder="Имя" id="name">
                </div>
                <div class="div_margin">
                    <label class="main_labels" for="surname">Фамилия:</label><br>
                    <input class="main_inputs" type="text" name="surname" placeholder="Фамилия" id="surname">
                </div>
                <div class="div_margin">
                    <label class="main_labels" for="patronymic">Отчество:</label><br>
                    <input class="main_inputs" type="text" name="patronymic" placeholder="Отчество" id="patronymic">
                </div>
                <div class="div_margin">
                    <label class="main_labels" for="email">Почта:</label><br>
                    <input class="main_inputs" type="email" name="email" placeholder="Почта" id="email">
                </div>
                <div class="div_margin">
                    <label class="main_labels" for="password">Пароль:</label><br>
                    <input class="main_inputs" type="password" name="password" autocomplete="on" placeholder="Пароль" id="password">
                </div>
                <div class="div_margin choise_person" id="choise">
                    <input class="radio_input" onclick="changeHide()" type="radio" id="teacher_radio" value="Учитель" name="person" >
                    <label class="main_labels" class="form-main-label" for="teacher_radio">Учитель</label>
                    <input class="radio_input" onclick="changeVew()" type="radio" id="student_radio" value="Ученик" name="person">
                    <labe class="main_labels" class="form-main-label" for="student_radio">Ученик</label>
                </div>
                <div class="div_margin" id="choise_class_hide">
                    <label class="main_labels" >Класс:</label>
                    <div class="class_letter_numb">
                        <input type="number" name="class_numb"  id="class_numb" min="1" max="11">
                        <input type="text" name="class_letter" placeholder="Буква класса" id="class_letter">
                    </div>
                </div>
                <div class="div_margin button_info">
                    <label id="info">Уже есть аккаунт? <a href="Главная.html">Войдите</a></label><br>
                    <button type="submit" name="submit">Register</button>
                </div>

            </form>

<div class="scrolbar">
    <div class="container_theachers">
        <div class="teacher">
            <div class="icon_acc"><img src="svg/acc-icon-big.svg" alt=""></div>
            <div class="teacher_name"><p class="teacher_name-name">ФИО</p></div>
        </div>
    </div>
</div>