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=".4.0/css/bootstrap.min.css">
<script src=".4.0/jquery.min.js"></script>
<script src=".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>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./bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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.
Share Improve this question edited Feb 12, 2023 at 11:27 monojohnny 6,21116 gold badges64 silver badges86 bronze badges asked May 15, 2019 at 19:36 Varun SharmaVarun Sharma 4,84213 gold badges55 silver badges105 bronze badges 2- Do you want all past submission stored within local storage or just the last submission? – Jordans Commented May 15, 2019 at 20:05
- @Jordans Thanks for the ment. I want to all past submission stored with in local storage. For example If I will submit four record, Then four record should be in local stoarge with Unique Id – Varun Sharma Commented May 15, 2019 at 20:10
2 Answers
Reset to default 5There 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");
This is a multi-step process using JavaScript. Modify your page to do the following (in order, all in JavaScript)
- form submit event - prevent default (will stop the page from posting data to the server)
- build object of form data
- convert form data JS object to JSON using JSON.stringify()
- set JSON string to localStorage key, such as
localStorage.myKey = myJSON; - redirect the page to detail.html
- access localStorage and decode JSON