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?

• Tushar: You can store the value in localStorage
• Eisa Adil: If you remove var from var jobValue = document.getElementById('code').value; wouldn't that make it automatically global and therefore usable anywhere?

Answer 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

Answer 2

use cookies

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