CODEWITHSUNDEEP
javascript
kotomari
kotomari

Reputation: 11

How to get form to save data and show on page later without erasing it

I've created a form, and figured out how to put the data where I am wanting it to show up. I want to know how to make it stay, when the page or app is refreshed/exited/etc.

<article>

<div align="center">    <script language="JavaScript">
function showInput() {
    document.getElementById('display').innerHTML = 
                document.getElementById("user_input").value;
}
</script>
    <form>
<label><b>Enter Your Amount:</b></label>
<input type="text" name="message" id="user_input">
</form><br />

<input class="button" type="submit" onclick="showInput();"><br/>
<p><span id='display'></span></p></div>

  </article>

So far I have this and it's working fine, except for saving the response. The project I'm working on is a budget tracker for a family member, so I want the form data to be saved and not erased every time they refresh or exit.

This is probably a pretty noob question, but I can't seem to find an answer that will work for me.

Upvotes: 0

Views: 46

Answers (1)

Brett Jackson
Brett Jackson

Reputation: 41

Sounds like a job for local storage. Local storage is just how it sounds local to the browser you are using you cannot access this data from anywhere but the computer/browser its stored in.

//this checks to see if local storage is available

if (typeof(Storage) !== "undefined") {

} else {

}

//grabbing your data i assume "user_input" and set it to a variable called "storage_var"

var storage_var = document.getElementById("user_input").value;

// For storing said data "to_the_ether"  variable name and can be w/e u want

localStorage.setItem("to_the_ether", storage_var);

// to get the value and pass it back into the display (im assuming a div?)

document.getElementById("display").innerHTML = localStorage.getItem("to_the_ether");

Hope that helps. If you need more accessible storage you need a DB,

Upvotes: 1

Related Questions