使用 JavaScript，如何在页面重新加载后保持用户输入？
[英]Using JavaScript , how do I keep user input on page after it has reloaded?
问题描述
I used HTML and JavaScript to allow a user to enter text and then push submit.
我使用 HTML 和 JavaScript 允许用户输入文本然后推送提交。 When the user pushes submit, his text is displayed on the page.当用户推送提交时，他的文本会显示在页面上。 The problem is that when the page is reloaded, the text goes away.问题是当页面重新加载时，文本消失了。 Obviously.明显地。 Here is the code I have:这是我的代码：
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> </head> <body> <p id="printhere"></p> <TEXTAREA Name="content" ROWS="5" COLS="20" id = "userInput"></TEXTAREA> <button onclick="display()">post</button> <script>function display(){ var post = document.getElementById("userInput");value. document.getElementById("printhere");innerHTML = post; }</script> </body> </html>
With JavaScript, is there anyway to make input stay once the page reloads?使用 JavaScript，一旦页面重新加载，是否仍然可以保持输入？
4 个解决方案
解决方案1
0 2020-05-31 15:39:59
You can use storage APIs (sessionStorage, localStorage) to acheive the same.您可以使用存储 API（sessionStorage、localStorage）来实现相同的目的。 Note : Store only the data which is not sensitive.注意：仅存储不敏感的数据。 Never use it for sensitive data.切勿将其用于敏感数据。
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API参考： https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
Example using sessionStorage: https://codepen.io/kishin-karra/pen/zYvgQZZ?editors=1010使用 sessionStorage 的示例： https://codepen.io/kishin-karra/pen/zYvgQZZ?editors=1010
sample code:示例代码：
var savedPost = sessionStorage.getItem('text');
document.getElementById("printhere").innerHTML = savedPost;
document.getElementById("userInput").value = savedPost;
function display() {
var post = document.getElementById("userInput").value;
document.getElementById("printhere").innerHTML = post;
sessionStorage.setItem('text', post);
}
Enter the text, click post and refresh输入文字，点击发布并刷新
解决方案2
0 2020-05-31 15:50:16
Well, ideally this value should come from the server through an API.好吧，理想情况下，这个值应该通过 API 来自服务器。 However, if you're keen on doing it with JavaScript, you may consider localstorage但是，如果您热衷于使用 JavaScript，您可以考虑localstorage
var post = document.getElementById("userInput").value;
localStorage.setItem("post", post);
document.getElementById("printhere").innerHTML = post || localStorage.getItem("post");
解决方案3
0 已采纳 2020-05-31 16:19:02
<p id="printhere"></p>
<TEXTAREA Name="content" ROWS="5" COLS="20" id="userInput"></TEXTAREA>
<button onclick="display()">post</button>
<script>
function display(){
var post = document.getElementById("userInput").value;
localStorage.setItem('userInputValue',post);
}
window.addEventListener('load',()=>{
var savedUserData = localStorage.getItem('userInputValue');
document.getElementById("printhere").innerHTML = savedUserData;
});
</script>
Edit for multiple input:编辑多个输入：
<p id="printhere"></p>
<TEXTAREA Name="content" ROWS="5" COLS="20" id="userInput"></TEXTAREA>
<button onclick="display()">post</button>
<script>
var num = 0;
function display(){
var post = document.getElementById("userInput").value;
localStorage.setItem(num,post);
var savedUserData = localStorage.getItem(num);
document.getElementById("printhere").innerHTML += savedUserData+'<br>';
num++;
}
window.addEventListener('load',()=>{
if (localStorage.length !== null) {
for(var i = 0; i < localStorage.length; i++){
var savedUserData = localStorage.getItem(i);
document.getElementById("printhere").innerHTML += savedUserData+'<br>';
}
}
});
</script>
解决方案4
-1 2020-05-31 15:58:12
I think you can use preventDefault like this:我认为您可以像这样使用preventDefault ：
function display(event){
event.preventDefault()
var post = document.getElementById("userInput").value;
document.getElementById("printhere").innerHTML = post;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.