将数据保存到localstorage，通过innerHTML显示，如果数据中没有内容，则显示span(Visitors)的原文

Question

我已经编写了将表单数据保存到本地存储的代码

<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>

如果您输入您的姓名并单击保存按钮，它会将您的姓名保存到本地存储中。然后如果你刷新页面，你会看到 form.You 下面的 "Welcome 'Your Name' Refresh the page to see changes" 可以通过单击删除按钮从本地存储中删除你的名字。所有这些任务都在工作。但是如果访问者没有保存任何名字或者如果访问者点击了删除按钮，我想显示跨度内的原始文本（亲爱的访问者，）。请告诉我该怎么做

Answer 1

您可以创建一个新的 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'); 
    }
}

Answer 2

我把代码改成了这样：

<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>

现在一切正常。

将数据保存到localstorage，通过innerHTML显示，如果数据中没有内容，则显示span(Visitors)的原文

Save data to localstorage, display it by innerHTML ,if there is nothing in the data,show the original text of span(Visitors)

html

javascript

angular2-localstorage

localstack