如何在本地存储中存储表单数据? [英] How to store form data in local storage?
问题描述
我正在实现一个表单提交过程，但是我没有使用任何DB(Backend).我想在客户端或浏览器中存储表单数据.所以我打算使用本地存储.
< html>< head>< title>引导程序示例</title>< meta charset ="utf-8">< meta name ="viewport" content ="width = device-width，initial-scale = 1">< link rel ="stylesheet" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">< script src ="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>< script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"</script></head>< body>< div class ="container">< div class ="row">< div class ="col-md-6">< form method ="post">< div class ="form-group">< label for ="usr"> Name</label><输入type ="text" class ="form-control" id ="usr"占位符=输入您的名字"必填></div>< div class ="form-group">< label for ="phone"> Phone</label><输入type ="text" class ="form-control" id ="phone"占位符=需要输入您的电话"></div>< div class ="form-group">< label for ="email"> Email</label><输入type ="email" class ="form-control" id ="email"占位符=需要输入电子邮件"></div>< div class ="form-group">< label for ="pwd">密码</label><输入type ="password" class ="form-control" id ="pwd"必需></div>< button type ="submit" class ="btn btn-success" formaction ="../BootStrapTemplate/detail.html"> Submit</button></form></div></div></div></body></html> 单击提交按钮后，我想存储数据.并且它将导航到另一个页面(detail.html页面).In detail.html我将显示所有信息.
我必须在详细页面上显示一些其他信息，即ID和时间.
我想根据ID存储数据(意味着第一次保存的数据id值应为1，第二次保存的数据值应为2)
我将第一次使用localstorage.因此，我对本地存储了解不多.每个记录的ID应该是唯一的.对我来说，这是一个更好的主意.如果有人有在客户端存储数据的好主意，请告诉我.
我已经看到一个链接，但是我无法对多个输入字段进行操作，而且我还想形成键值JOSN的形式.
有一些可用的插件，但是如果您不想使用它. 要检索 I am implementing one form submit process, But I am not using any DB(Backend). I want to store form data in client side or browser. So I am planning to use localstorage.
I want to store data after click on the submit button. And also it will navigate to another page(detail.html page), In detail.html I will display all information. Some additional information I have to show in detail page, Id and Time. I want to store data according to ID(means first time saved data id value should be 1, second time saved data value should be 2) I will use localstorage first time. So I don't know so much about localstorage. Id should be unique per record.
According to me it a better idea. If anybody has good idea storing the data in client side, Please let me know. I have seen one link, But I am not able to do for multiple input fields, And I also want to form of key, value JOSN. There are some plugins available but if you don't want to use that.Plugin-to-Save-Form-Fields-Values-To-localStorage you can use this. window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)* Note:- Before using web storage, check browser support for localStorage and sessionStorage. To store To retrieve
这篇关于如何在本地存储中存储表单数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); <html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class=" row ">
<div class="col-md-6">
<form method="post">
<div class="form-group">
<label for="usr">Name</label>
<input type="text" class="form-control" id="usr" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" placeholder="Enter your phone" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" required>
</div>
<button type="submit " class="btn btn-success" formaction="../BootStrapTemplate/detail.html">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>localStorage.setItem("lastname", "Smith");
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
