javascript - 如何让表单保存数据并稍后在页面上显示而不删除它

Question

我创建了一个表单，并弄清楚如何将数据放在我想要显示的位置。我想知道当页面或应用程序刷新/退出等时如何使其保持。

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

到目前为止，我已经有了这个并且工作正常，除了保存响应之外。我正在从事的项目是家庭成员的预算跟踪器，因此我希望保存表单数据，而不是在每次刷新或退出时都将其删除。

这可能是一个相当菜鸟的问题，但我似乎找不到适合我的答案。

Answer 1

听起来像是本地存储的工作。本地存储就是您所使用的浏览器的本地存储，除了存储在其中的计算机/浏览器之外，您无法从任何地方访问这些数据。

//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");

希望有帮助。如果您需要更易于访问的存储，则需要数据库，