如何在 javascript 中正确地将表单数据保存在本地存储中以供以后使用
[英]How to properly save form data in local storage for later usage in javascript
问题描述
I need to save form data (firstname and lastname) in localstorage once the form is submitted so that i will not have to type it again the next time i want to submit the form.
提交表单后，我需要将表单数据（名字和姓氏）保存在本地存储中，这样下次我想提交表单时就不必再次输入了。
I have tried the code below but when i refreshed the page, form data is not saved on localstorage.我已经尝试了下面的代码，但是当我刷新页面时，表单数据没有保存在本地存储中。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function store(){
var firstname= document.getElementById('firstname').value;
localStorage.setItem("firstname_data", firstname);
var lastname= document.getElementById('lastname').value;
localStorage.setItem("lastname_data", lastname);
var storedValue_firstname = localStorage.getItem("firstname_data");
var storedValue_lastname = localStorage.getItem("lastname_data");
alert(storedValue_firstname);
alert(storedValue_lastname);
//document.getElementById('firstname').value = storedValue_firstname;
//document.getElementById('lastname').value = storedValue_lastname;
//window.location='/';
}
</script>
<form action="test.php" class="form1" method="post" />
<input name="firstname" type="text" id="firstname" class='' placeholder="firstname" /><br>
<input name="lastname" type="text" id="lastname" class='' placeholder="lastname" /><br>
<button onclick="store()" type="button">Store Form Data</button>
</form>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2022-08-28 22:43:01
you can try to use windows.onload event.您可以尝试使用 windows.onload 事件。 When you reload the page, with this event you can check if anything is stored in the localstorage or not.当您重新加载页面时，您可以通过此事件检查是否有任何内容存储在本地存储中。 if stored then will set this value to the input field as required.如果存储，则将根据需要将此值设置为输入字段。 see the example code here在此处查看示例代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form action="test.php" class="form1" method="post" />
<input name="firstname" type="text" id="firstname" class='' placeholder="firstname" /><br>
<input name="lastname" type="text" id="lastname" class='' placeholder="lastname" /><br>
<button onclick="store()" type="button">Store Form Data</button>
</form>
<script type="text/javascript">
function store(){
var firstname= document.getElementById('firstname').value;
localStorage.setItem("firstname_data", firstname);
var lastname= document.getElementById('lastname').value;
localStorage.setItem("lastname_data", lastname);
alert(storedValue_firstname);
alert(storedValue_lastname);
}
window.onload = function exampleFunction() {
var storedValue_firstname = localStorage.getItem("firstname_data");
var storedValue_lastname = localStorage.getItem("lastname_data");
if(storedValue_firstname) {
document.getElementById('firstname').value = storedValue_firstname;
}
if(storedValue_lastname) {
document.getElementById('lastname').value = storedValue_lastname;
}
}
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.