Как мне сделать чтобы когда я вводил свое имя на странице в первый раз — оно сохранялось, и при перезагрузке страницы мне не приходилось вводить его?

Question

[Арсений Соколовский]

У меня есть код HTML

<div style="width: 0;height: 0;">
<div onclick="endName()" id="key" class="key"></div>
</div>
<div id="in" style="width: 0;height: 0;">
    <input placeholder="Enter Name" id="input" onkeyup="input(), this.value=this.value.replace(/\s+/gi,'')" class="name_input" type="text">
</div>

вот как он выглядит

и вот еще код JS

function input() {
  var input_taker = document.getElementById('input').value;
  document.getElementById('nickname-menu').innerHTML = input_taker;
}

function endName(){
    if(document.getElementById('input').value.length > 5 && document.getElementById('input').value.length < 10){
        var endName = $('#input');
    console.log(endName.attr('class'));
    endName.removeAttr('class', 'input');
    endName.attr('class', 'none');
    var endName1 = $('#key');
    console.log(endName1.attr('class'));
    endName1.removeAttr('class', 'key');
    endName1.attr('class', 'none');
    var ramms = localStorage.getElementById('nickname-menu');
    console.log(ramms);
    } else {
        alert('Your name must contain at least 5 characters and no more than 10 characters and must not contain spaces');
    }
}

Все что я ввожу в input сразу же переходит в h1 с id:"nickname-menu". Ну так вот, мне нужно сделать так, чтобы когда я ввел свое имя - оно сохранялось , и вот это поле ввода имени не появлялось, помогите мне плеаз. Если вы что-то не поняли напишите и я попробую обьяснить

Answer 1

[NewUser4242]

Сохранять в localstorage
Что-то типа этого, но нужно переделать

if(localStorage.getItem(login)) {
        JSON.parse(localStorage.getItem(login)).forEach(function (item) {
            cart.push(item);
        });

Comments

[Арсений Соколовский]

спасибо

Answer 2

[LJ322]

Как вариант: использовать localStorage, если у вас не подключена БД. Перед своим кодом добавьте:

if (localStorage.getItem('name')) {
  document.getElementById('nickname-menu').innerHTML = localStorage.getItem('name');
  document.getElementById('input').style.display = 'none'; 
}

И добавьте функционал в функцию input():

function input() {
  var input_taker = document.getElementById('input').value;
  document.getElementById('nickname-menu').innerHTML = input_taker;
  localStorage.setItem('name', input_taker); //Записать значение в localStorage
}