Menu
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.
<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>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 JSON.
584
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
localStorage.setItem("lastname", "Smith");
To retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
