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

Question

I've made this code for saving a form data to localstorage

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

If you enter your name and click the save button,it saves your name into localstorage. Then if you Refresh the page,You will see "Welcome 'Your Name' Refresh the page to see changes" below the form.You can simply delete your name from localstorage by clicking the delete button. All that tasks are working. But if the visitor didn't saved any name or if the visitor click over the delete button, I want to show the original text which is inside the span(Dear Visitor,). Please tell me how to do that

Do I need to add statement like this :{localStorage.getItem('mynumber'); } — user8312352, Aug 06 '17 at 04:39
In other words, I want the script to Call myfunction2, if localStorage.getItem('mynumber') is not equal to empty (localStorage.getItem('mynumber')!="") And call a function myfunction4 if localStorage.getItem('mynumber')!="" . How to do that? — user8312352, Aug 06 '17 at 04:57
First of all, I highly recommend reformatting the code so that it's a bit easier to read. There seems to be a missing `{` after `myfunction3()`. — Flight Odyssey, Aug 06 '17 at 05:00

score 1 · Accepted Answer · answered Aug 06 '17 at 05:08

1

You can make a new myfunction4() which resets the value (although perhaps you can find a better name for it than that):

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

And you can call it when the user clicks delete:

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

When the name saved is blank, you don't really need to do anything at all.

function myfunction2() {
    if(localStorage.getItem('mynumber')!="") {
        document.getElementById('recalledtext').innerHTML = localStorage.getItem('mynumber'); 
    }
}

answered Aug 06 '17 at 05:08

Flight Odyssey

2,267
18
25

These idea may work.but it's a little hard for me. please make something like this:. Var x= localStorage.getItem('mynumber'); if(x !="") {Var x=y}; if(x =""){y="Dear Visitor,"}; function myfunction2(){document.getElementById('recalledtext').innerHTML =y – user8312352 Aug 06 '17 at 05:16
Why do you want all the functions to be in one line? You should put some line breaks in your code. You should be able to just copy these functions into your code, replacing the existing functions where applicable, and it should more or less work. Although I haven't tested it, so no guarantees. – Flight Odyssey Aug 06 '17 at 05:17
Because I'm using this code as a plugin for my website. your answered code looks like working,but it's not what is want. In my idea, I just have to change innerHTML into variable y. But only have these ideas. I don't have enough JavaScript knowledge for playing with these much variables. Looks like you know a lot, so please help me with my variable idea. – user8312352 Aug 06 '17 at 05:24
I don't think you need so many variables, these are very simple functions. If you need this code to do something more complex you should ask a different question or consider researching more about JavaScript tutorials to understand the code. – Flight Odyssey Aug 06 '17 at 05:27
Var x is localStorage.getItem('mynumber'); and var y is "Dear Visitor,". If var x="", I want to make var y=z If var x !="", I want to make something like this: var x=z. And myfunction2(){document.getElementById('recalledtext').innerHTML =z – user8312352 Aug 06 '17 at 05:32
You generally shouldn't share variables between different functions. (If the variables are declared inside a function, this won't work at all. If they are declared outside of a function, it will work but probably will not do what you expect.) Variables are not automatically updated when the value that they "refer to" changes. So your var x doesn't get updated when localStorage changes. Regarding your other points, see https://www.w3schools.com/js/js_if_else.asp – Flight Odyssey Aug 06 '17 at 05:37
Maybe I have to use your answer for my plugin. I don't have any other ideas. – user8312352 Aug 06 '17 at 05:41
But looks like there is a little error in your answer. Only Myfunction4 is abled to change innerHTML into "Dear Visitor" and Myfunction4 only calls while Myfunction3 is running (I mean, it Myfunction4 only calls after clicking the "delete name" button clicks. If the webpage gets Reloaded, Myfunction4 won't get called – user8312352 Aug 06 '17 at 05:46
This is true. You can insert it other places if you want. I'm not gonna write your whole website for you, sorry. – Flight Odyssey Aug 06 '17 at 05:48
I have an other idea. What if when the delete button press, we just change the localstorage data into "Dear visitor," – user8312352 Aug 06 '17 at 06:04
I've added a myfunction5: – user8312352 Aug 06 '17 at 06:11
And here is the body:.
Welcome Dear Visitors Refresh the page to see changes – user8312352 Aug 06 '17 at 06:14
But still there is some kind of problem. Please check, of there is any character missing or something. I don't know the basics of JavaScript. So I need your help. – user8312352 Aug 06 '17 at 06:14
`return` ends the function. Change `myfunction3` to `function myfunction3() { localStorage.removeItem('mynumber'); myfunction4(); myfunction5(); return ''; }`. – Flight Odyssey Aug 06 '17 at 07:11

score 0 · Answer 2 · answered Aug 06 '17 at 07:16

I have changed the code into this:

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

And now it's perfectly working.

Now I'll edit the function name for making the code looks like easy. — user8312352, Aug 06 '17 at 07:18
I have a doubt. I'm using the key "mynumber" for localstorage.what happens if any other Website save any data with this same key? Will it make any changes in my website? — user8312352, Aug 06 '17 at 07:22

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

2 Answers2