Saving data with HTML?

Question

<p id="p2">Hello World!</p>
Enter Code:<br>
<input type="text" id="code" value="HTML">
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
var jobValue = document.getElementById('code').value;
document.getElementById("p2").innerHTML = jobValue; }
</script>
</form>

Okay this HTML snippet takes the value form the textbox and then changes "Hello World!" into that value after you clicked "Click Me". But when Im running it on my host it wont save. What would I do to save the output even if I refresh the page?

If you remove var from var jobValue = document.getElementById('code').value; wouldn't that make it automatically global and therefore usable anywhere? — Eisa Adil
– Eisa Adil, Commented Jan 10, 2016 at 7:36

brk · Accepted Answer · 2016-01-10 07:38:32Z

1

You can use localStorage to save and retrieve values in a key & value format. Here is a snippet

HTML

<p id="p2">Hello World!</p>
Enter Code:<br>
<input type="text" id="code" value="HTML">
<button onclick="myFunction()">Click me</button>
<!-- Just for testing-->
<button onclick="testStoredVal()">Check Stored Val</button>

JS

 function myFunction() {
    var jobValue = document.getElementById('code').value;
      if(typeof(Storage) !== "undefined") {
       localStorage.jobValue = jobValue;
    } else {
        // Sorry! No Web Storage support..
      }
    }

    // This function is just for testing
      function testStoredVal(){
        if(localStorage.jobValue == undefined){
        alert('No value Stored');  
       }
        else{
          alert(localStorage.jobValue);
        }
      }

EXAMPLE HERE

answered Jan 10, 2016 at 7:38

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachin · Accepted Answer · 2016-01-10 07:32:00Z

0

use cookies

document.cookie = code + "=" + jobValue + "; "

answered Jan 10, 2016 at 7:32

Sachin

1,2181 gold badge10 silver badges20 bronze badges

Collectives™ on Stack Overflow

Saving data with HTML?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related