Question

我正在实现一个表单提交过程，但是我没有使用任何DB（Backend）。我想在客户端或浏览器中存储表单数据。因此，我计划使用本地存储。

<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>

单击提交按钮后，我想存储数据。并且它将导航到另一个页面（detail.html页面）。In detail.html我将显示所有信息。

我必须在详细页面上显示一些其他信息，即ID和时间。

我想根据ID存储数据（意味着第一次保存的数据id值应为1，第二次保存的数据值应为2）

我将第一次使用localstorage。因此，我对本地存储了解不多。每个记录的ID应该是唯一的。对我来说，这是一个更好的主意。如果有人有在客户端存储数据的好主意，请告诉我。

我已经看到一个链接，但是我无法对多个输入字段进行操作，而且我还想形成键值JOSN的形式。

Answer 1

有一些可用的插件，但是如果您不想使用它们。Plugin-to-Save-Form-Fields-Values-To-localStorage

您可以使用它。

window.localStorage -存储没有到期日期的数据

window.sessionStorage -存储一个会话的数据（关闭浏览器选项卡时数据丢失）*

注意：-在使用网络存储之前，请检查浏览器对localStorage和sessionStorage的支持。

要存储

localStorage.setItem("lastname", "Smith");

要检索

document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Answer 2

这是使用JavaScript的多步骤过程。修改页面以执行以下操作（依次使用JavaScript）

表单提交事件-阻止默认设置（将停止发布页面数据发送到服务器）
构建表单数据的对象
使用JSON.stringify（）将表单数据JS对象转换为JSON
将JSON字符串设置为localStorage密钥，例如localStorage.myKey = myJSON;
将页面重定向到detail.html
访问localStorage并解码JSON

如何在本地存储中存储表单数据？

2 个答案: