How to store form data in local storage?

问题

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>

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.

回答1:

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");

回答2:

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

来源：https://stackoverflow.com/questions/56156486/how-to-store-form-data-in-local-storage

标签

javascript

jquery

html

local-storage

indexeddb