Здравствуйте. Имеется код, который запоминает в куках браузера введенные пользователем имя и фамилию. Затем перенаправляет на страницу (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();
})();
