Сохраните данные в localalstorage, отобразите их с помощью innerHTML, если в данных ничего нет, покажите оригинальный текст span(Посетители)

Я сделал этот код для сохранения данных формы в localalstorage

<HTML>
<head>
<script>
function myfunction1(){texttosave = document.getElementById('textline').value ; localStorage.setItem('mynumber', texttosave); } function myfunction2(){document.getElementById('recalledtext').innerHTML = localStorage.getItem('mynumber'); } function myfunction3() {localStorage.removeItem('mynumber'); return '';}
</script>
</head>
<body onload='myfunction2()'>
<input type="text" id="textline" placeholder="Enter Your Name"/> <button id="rememberer" onclick='myfunction1()'>Save</button> <button id="recaller" onclick='myfunction3()'>Delete Your Name</button>
<br>
 Welcome<span id="recalledtext" >Dear Visitor,</span> Refresh the page to see changes
</body>
</HTML>

Если вы введете свое имя и нажмете кнопку "Сохранить", оно сохранит ваше имя в локальном хранилище. Затем, если вы обновите страницу, вы увидите "Добро пожаловать", ваше имя "Обновить страницу, чтобы увидеть изменения" под формой. Вы можете просто удалить свое имя из localalstorage, нажав кнопку "Удалить". Все эти задачи работают. Но если посетитель не сохранил какое-либо имя или посетитель нажал на кнопку удаления, я хочу показать исходный текст, который находится внутри промежутка (Уважаемый посетитель,). Подскажите пожалуйста как это сделать

Источник

2 ответа

Решение

Вы можете сделать новый myfunction4() который сбрасывает значение (хотя, возможно, вы можете найти для него лучшее имя, чем это):

function myfunction4(){
    document.getElementById('recalledtext').innerHTML = "Dear visitor,";
}

И вы можете позвонить, когда пользователь нажимает удалить:

function myfunction3() {
    localStorage.removeItem('mynumber'); 
    myfunction4();
    return '';
}

Когда сохраненное имя пустое, вам вообще ничего не нужно делать.

function myfunction2() {
    if(localStorage.getItem('mynumber')!="") {
        document.getElementById('recalledtext').innerHTML = localStorage.getItem('mynumber'); 
    }
}
Источник

Я изменил код в это:

<HTML>
<head>
<script>
function myfunction1(){texttosave = document.getElementById('textline').value ; localStorage.setItem('mynumber', texttosave); } function myfunction2() { if(localStorage.getItem('mynumber')!="") { document.getElementById('recalledtext').innerHTML = localStorage.getItem('mynumber'); } } function myfunction4(){ document.getElementById('recalledtext').innerHTML = "Dear visitor"; } function myfunction5(){texttosav = document.getElementById('Default').value ; localStorage.setItem('mynumber', texttosav); } function myfunction6(){  textdata = document.getElementById('textline').value ;   document.getElementById('recalledtext').innerHTML = textdata; }
</script>
</head>
<body onload='myfunction2()'>
<input type="text" id="textline" placeholder="Enter Your Name"/> 
<input type="hidden" id="Default"value="Dear Visitor" placeholder="Enter Your Name"/><button id="rememberer" onclick='myfunction1();myfunction6();'>remember text</button> <button id="recaller" onclick='myfunction4();myfunction5();'>Delete Your Name</button>
<br>
 Welcome <span id="recalledtext" >Dear Visitor</span>, Refresh the page to see changes
</body>
</HTML>

И теперь это отлично работает.

Источник
Другие вопросы по тегам