如何在本地存儲中存儲表單數據？
[英]How to store form data in local storage?
問題描述
我正在實現一個表單提交過程，但是我沒有使用任何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>
我必須在詳細頁面（Id和時間）中顯示一些其他信息。
我想根據ID存儲數據（意味着第一次保存的數據ID值應為1，第二次保存的數據值應為2）
我將第一次使用localstorage。 因此，我對本地存儲了解不多。 每個記錄的ID應該是唯一的。 對我來說，這是一個更好的主意。 如果有人有在客戶端存儲數據的好主意，請告訴我。
我已經看到一個鏈接，但是我無法對多個輸入字段執行操作，而且我還想形成鍵值JOSN的形式。
2 個解決方案
解決方案1
1 2019-05-16 06:17:40
有一些可用的插件，但是如果您不想使用它。 插件到保存表格，字段值到localStorage的
你可以用這個
window.localStorage-存儲沒有到期日期的數據
window.sessionStorage-存儲一個會話的數據（關閉瀏覽器選項卡時數據丟失）*
注意 ：- 在使用Web存儲之前，請檢查瀏覽器對localStorage和sessionStorage的支持 。
儲藏
localStorage.setItem("lastname", "Smith");
取回
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
解決方案2
0 2019-05-15 19:54:38
這是使用JavaScript的多步驟過程。 修改頁面以執行以下操作（依次使用JavaScript）
- 表單提交事件-防止默認（將阻止頁面將數據發布到服務器）
- 構建表單數據的對象
- 使用JSON.stringify（）將表單數據JS對象轉換為JSON
- 將JSON字符串設置為localStorage密鑰，例如
localStorage.myKey = myJSON; - 將頁面重定向到detail.html
- 訪問localStorage並解碼JSON
如何使用 javascript 而不是 Django 會話將表單數據（Django 表單）存儲到瀏覽器的本地存儲？
[英]How to store Form Data (a Django form) to browser's local storage, using javascript and not Django sessions?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.