記錄--form 表單恢復初始數據

来源:https://www.cnblogs.com/smileZAZ/archive/2023/08/14/17629441.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 form 表單恢復初始數據 在現代的 Web 開發中，表單是不可或缺的組件之一。用戶可以通過表單輸入和提交數據，而開發者則需要對這些數據進行處理和存儲。然而，在某些情況下，我們可能需要重置表單並恢復到最初的狀態。 本文介紹瞭如何使用 fo ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

form 表單恢復初始數據

在現代的 Web 開發中，表單是不可或缺的組件之一。用戶可以通過表單輸入和提交數據，而開發者則需要對這些數據進行處理和存儲。然而，在某些情況下，我們可能需要重置表單並恢復到最初的狀態。

本文介紹瞭如何使用 form 表單處理庫來實現表單恢復初始數據的功能。通過 form 提供的靈活性和方便性，我們能夠快速構建響應式的表單，並且能夠輕鬆地管理和恢復表單數據。希望本文對你在 Web 開發中處理表單數據有所幫助！

1 表單數據的保存和恢復方法

1.1 前端數據保存方法

在前端，我們可以使用兩種方法來保存表單數據：LocalStorage 和 Cookie。

1.使用 LocalStorage 保存數據：LocalStorage 是瀏覽器提供的一種本地存儲機制，它允許將數據以鍵值對的形式存儲在用戶的瀏覽器中。要保存表單數據到 LocalStorage 中，可以使用 JavaScript 的 localStorage.setItem(key, value) 方法，其中 key 是一個唯一的標識符，value 是要保存的數據。例如：

// 保存表單數據到 LocalStorage
localStorage.setItem('form_data', JSON.stringify(formData));

2.使用 Cookie 保存數據：Cookie 是另一種在瀏覽器中存儲數據的方式。通過設置 Cookie，可以將表單數據保存在用戶的瀏覽器中，併在需要時進行恢復。要保存表單數據到 Cookie 中，可以使用 JavaScript 的 document.cookie 屬性，將表單數據作為字元串賦值給該屬性。例如：

// 保存表單數據到 Cookie
document.cookie = 'form_data=' + encodeURIComponent(JSON.stringify(formData));

1.2 表單數據的恢復方法

1.2.1 使用 JavaScript 重置表單

如果只是簡單地想要清空表單數據並恢復到初始狀態，可以使用 JavaScript 的 reset() 方法來重置表單。這個方法會將所有表單欄位的值重置為預設值。例如：

// 重置表單
document.getElementById('myForm').reset();

1.2.2 使用 Vform 庫恢復表單數據

Vform 是一個輕量級的 JavaScript 庫，用於處理表單驗證和提交。它還提供了一種方便的方法來恢復表單數據。要使用 Vform 來恢復表單數據，首先需要在頁面中引入 Vform 庫，並創建一個 Vform 實例。然後可以使用 setData(data) 方法將保存的表單數據設置到 Vform 實例中。例如：

// 引入 Vform 庫
<script src="vform.min.js"></script>

// 創建 Vform 實例
var form = new VForm({
  // 表單配置項
});

// 恢復表單數據
form.setData(savedData);

以上是常見的表單數據保存和恢復方法。根據具體需求，你可以選擇適合自己項目的方式來實現表單數據的保存和恢復功能。

1.3 後端數據保存方法

在後端開發中，有多種方法可以用來保存數據。下麵是兩種常見的方法：

1.2.1 使用資料庫保存數據

使用資料庫是一種常見且強大的方式來保存和管理數據。資料庫提供了結構化的存儲機制，並支持各種查詢和操作數據的功能。常見的關係型資料庫包括 MySQL、PostgreSQL 和 Oracle 等，而非關係型資料庫如 MongoDB 和 Redis 也廣泛應用於不同場景。

通過使用資料庫，你可以創建表格和模式來定義數據的結構，並將數據以行和列的形式進行存儲。這樣做的好處是可以方便地對數據進行增刪改查操作，並且保證數據的一致性和完整性。同時，資料庫還提供了事務處理和併發控制等功能，確保數據的安全性和可靠性。

1.2.2 使用伺服器會話保存數據

另一種常見的方法是使用伺服器會話來保存數據。伺服器會話是指在客戶端和伺服器之間建立的一種狀態保持機制，它可以在用戶請求之間保存數據。通常情況下，伺服器會為每個用戶分配一個唯一的會話標識符（Session ID），並將該標識符與用戶相關的數據存儲在伺服器記憶體或其他持久化介質中。

使用伺服器會話保存數據的好處是簡單快捷，適用於小規模的應用。你可以將用戶的臨時數據存儲在會話對象中，併在需要時從伺服器檢索和更新數據。然而，由於伺服器會話是基於記憶體的，當伺服器重啟或者負載過高時，會話數據可能會丟失。

綜上所述，使用資料庫保存數據是一種更為可靠和靈活的方式，特別適合大規模的應用程式。而使用伺服器會話保存數據則適用於小規模、簡單的應用場景。具體選擇哪種方法取決於你的需求和項目的規模。

2 表單初始化

2.1 前端初始化方法

在前端初始化表單時，有兩種常見的方法可以使用。

2.1.1 通過從 LocalStorage 或 Cookie 獲取數據進行填充

一種方法是通過從本地存儲（LocalStorage）或者 Cookie 中獲取已保存的數據，並將這些數據填充到表單中。這種方法適用於需要在用戶離開頁面後再次載入時保留表單數據的情況。

對於 LocalStorage，你可以使用 JavaScript 的localStorage.getItem(key)方法來獲取存儲的數據。然後，你可以使用 DOM 操作來將數據填充到相應的表單欄位中。

以下是一個示例代碼：

// 從 LocalStorage 獲取數據
var data = localStorage.getItem('formData');

// 將數據填充到表單欄位中
document.getElementById('inputField').value = data;

類似地，你也可以使用document.cookie屬性來獲取 Cookie 中的數據，並將其填充到表單欄位中。

2.1.2 使用 JavaScript 動態創建表單並填充數據

另一種方法是使用 JavaScript 動態創建表單元素，並將數據填充到這些元素中。這種方法通常用於在頁面載入時根據某些條件生成表單。

首先，你需要創建表單元素，如文本框、覆選框等。然後，你可以使用 DOM 操作來設置這些元素的屬性和值。

以下是一個示例代碼：

// 創建文本框
var inputField = document.createElement('input');
inputField.type = 'text';
inputField.value = '預設值';

// 將文本框添加到表單中
document.getElementById('form').appendChild(inputField);

你可以根據需要創建其他類型的表單元素，並將它們添加到表單中。然後，使用相應的數據填充這些元素。

請註意，上述代碼僅為示例，實際情況下可能會有更複雜的邏輯和操作。具體的實現方式取決於你的需求和技術棧。

2.2 後端初始化方法

2.2.1 從資料庫查詢並傳遞數據到前端進行填充

一種常見的方法是從資料庫中查詢需要恢復的數據，並將其傳遞到前端頁面進行填充。這種方法適用於需要在後端進行數據處理或者需要從資料庫中獲取數據的情況。

下麵是一個示例的後端初始化方法的偽代碼：

# 從資料庫查詢數據
data = query_data_from_database()

# 將數據傳遞到前端頁面
return render_template('form.html', data=data)

在上述代碼中，首先通過調用適當的資料庫查詢方法來獲取需要恢復的數據。然後，使用適當的方法將數據傳遞到前端頁面，這裡使用了render_template方法，將數據作為參數傳遞給前端頁面的模板。

在前端頁面的模板中，可以使用相應的方式將數據填充到相應的表單控制項中，例如使用value屬性或者通過 JavaScript 動態填充表單數據。

2.2.2 使用伺服器會話保存和傳遞數據

另一種常見的方法是使用伺服器會話（session）來保存和傳遞數據。伺服器會話可以在客戶端和伺服器之間保持數據狀態，使得數據可以在不同的請求之間進行共用。

下麵是一個示例的後端初始化方法的偽代碼：

# 從伺服器會話中獲取數據
data = session.get('data')

# 將數據傳遞到前端頁面
return render_template('form.html', data=data)

在上述代碼中，我們通過session.get方法從伺服器會話中獲取保存的數據。然後，將數據傳遞到前端頁面的模板中，以便進行填充。

在前端頁面的模板中，可以使用相應的方式將數據填充到相應的表單控制項中，例如使用value屬性或者通過 JavaScript 動態填充表單數據。

需要註意的是，使用伺服器會話保存數據的方法依賴於具體的後端框架或庫。不同的框架或庫可能會提供不同的方法來操作會話數據，因此具體實現方式可能會有所不同。在使用這種方法時，需要查閱相應的文檔或者參考示例代碼來瞭解如何在特定框架或庫中使用伺服器會話。

3 表單數據的重置

3.1 前端重置方法

在前端中，有兩種常見的方法可以重置表單數據：使用 JavaScript 操作表單元素來重置數據，或者使用表單元素自帶的 reset()方法。

3.1.1 使用 JavaScript 重置表單數據

使用 JavaScript 來重置表單數據可以通過遍歷表單中的所有輸入欄位，並將其值設置為初始值或空字元串來實現。下麵是一個示例代碼：

// 獲取表單元素
const form = document.getElementById('myForm');

// 遍歷表單中的所有輸入欄位
Array.from(form.elements).forEach((element) => {
  // 檢查元素類型是否為 input，並且不是 submit 按鈕
  if (element.nodeName === 'INPUT' && element.type !== 'submit') {
    // 將輸入欄位的值設置為空字元串
    element.value = '';
  }
});

上述代碼首先獲取了具有 id 為"myForm"的表單元素，然後通過遍歷表單元素的 elements 屬性，找到所有的輸入欄位。對於每個輸入欄位，我們檢查它的節點名稱是否為"INPUT"，並且排除了 type 為"submit"的按鈕。最後，我們將輸入欄位的值設置為空字元串。

3.1.2 使用表單的 reset() 方法重置數據

另一種方法是使用表單元素自帶的 reset()方法。這個方法會將表單中的所有輸入欄位恢復到它們的初始值。要使用這個方法，只需調用表單元素的 reset()方法即可。下麵是一個示例代碼：

// 獲取表單元素
const form = document.getElementById('myForm');

// 重置表單數據
form.reset();

上述代碼中，我們首先獲取了具有 id 為"myForm"的表單元素，然後調用了它的 reset()方法來重置表單數據。

選擇使用哪種方法取決於需求和個人偏好。如果你需要更多的靈活性，並且想要根據自己的邏輯來確定如何重置表單數據，那麼使用 JavaScript 操作表單元素可能是一個不錯的選擇。而如果你只是簡單地希望將所有輸入欄位恢復到初始值，那麼使用表單的 reset()方法會更加方便。

3.2 後端重置方法

在後端重置表單數據時，有幾種常見的方法可以實現。

一種方法是根據需求更新資料庫中的數據。當用戶提交表單時，後端伺服器可以接收到表單數據並將其存儲在資料庫中。如果需要重置表單數據，可以通過更新資料庫中相應欄位的值來實現。例如，可以將欄位的值設為預設值或空值，以達到重置的效果。

另一種方法是通過清除伺服器會話來重置數據。會話是指伺服器與客戶端之間的持久連接，在會話過程中可以存儲和訪問特定用戶的數據。如果需要重置表單數據，可以簡單地銷毀當前會話，並創建一個新的會話。這樣做會清除所有與當前用戶相關的數據，包括表單數據。

具體選擇哪種方法取決於你的需求和個人偏好。如果你希望保留歷史數據併進行記錄，那麼更新資料庫可能更合適。如果你只關心當前會話的數據，並且希望完全重置表單數據，那麼清除伺服器會話可能是更好的選擇。

4 特殊情況下的表單數據恢復

4.1 多步表單的數據恢復

在處理多步表單時，有幾種方法可以實現數據的恢復。

一種方法是使用持久化存儲來保存多個步驟的數據。當用戶完成一個步驟並轉到下一個步驟時，將當前步驟的表單數據保存在伺服器端或客戶端的持久化存儲中（如資料庫、本地存儲等）。這樣，在用戶返回上一步或重新載入頁面時，可以從持久化存儲中讀取之前保存的數據，並將其填充回表單中，以便用戶繼續編輯或查看。

另一種方法是根據當前步驟和已存儲的數據來恢復表單數據。在每個步驟切換或頁面載入時，可以檢查之前是否保存了該步驟的數據。如果存在保存的數據，則將其填充回表單中；否則，表單保持為空白狀態。這種方法不需要額外的持久化存儲，只需在記憶體中保存數據即可。

具體選擇哪種方法取決於你的需求和技術實現。如果需要長期保存數據或跨設備訪問數據，那麼使用持久化存儲可能更合適。如果只需要在當前會話中保存數據，並且不需要長期存儲，那麼基於當前步驟和已存儲數據的恢復方法可能更簡單有效。

4.2 動態表單的數據恢復

在處理動態表單時，以下兩種方法可以用來恢複數據：

  1. 根據頁面上動態生成的表單欄位來恢複數據：當動態表單中的欄位被創建或刪除時，可以將每個欄位的值保存在一個對象中。這個對象可以在後臺或前端進行維護，並根據需要更新和存儲表單欄位的值。當需要恢復表單數據時，可以通過遍歷該對象並將相應欄位的值填充回表單中。

  2. 使用動態數據模型來保存和恢復表單數據：動態數據模型是一種靈活的方式，可以根據表單的結構和欄位動態地定義數據模型。可以使用類似 JSON 的格式來表示數據模型，併在用戶輸入數據時實時更新模型。當需要恢復表單數據時，可以從數據模型中獲取相應欄位的值，並將其填充回表單中。

具體選擇哪種方法取決於你的需求和技術實現。如果動態表單的欄位數量和結構經常變化，並且需要更高的靈活性，那麼使用動態數據模型可能更合適。如果動態表單的欄位較少且不會頻繁變化，那麼根據頁面上動態生成的表單欄位來恢複數據可能更簡單有效。

4.3 部分欄位的選擇性恢復

如果你想要選擇性地恢復特定的表單欄位，可以使用條件語句來控制欄位的填充。以下是一個示例：

// 假設有一個包含表單欄位的對象 formData

// 恢覆文本輸入框的值
if (formData.textInput) {
  document.getElementById('textInput').value = formData.textInput;
}

// 恢複復選框的選中狀態
if (formData.checkbox) {
  document.getElementById('checkbox').checked = true;
}

// 恢復下拉列表的選項
if (formData.selectOption) {
  document.getElementById('selectOption').value = formData.selectOption;
}

在這個示例中，我們假設 formData 是一個包含了需要恢復的表單欄位的對象。通過判斷每個欄位是否存在，並根據需要設置對應的表單元素的值或選中狀態，實現了選擇性地恢復特定的表單欄位。

請註意，上述示例中的代碼只是一種可能的實現方式，具體的實現方法取決於你的需求和前端框架/庫的使用情況。

5 安全性考慮

當重置表單數據時，確保遵循以下安全性考慮：

5.1 避免存儲敏感數據

在前端重置表單數據時，確保不會將敏感數據存儲在客戶端。這意味著不要將密碼、信用卡信息或其他敏感個人數據保存在瀏覽器的本地存儲或 Cookie 中。

5.2 使用加密和驗證機制保護數據的安全傳輸

如果表單涉及到通過網路傳輸數據（例如提交到伺服器），請使用加密協議（如 HTTPS）來保護數據的安全傳輸。這樣可以防止第三方截獲或篡改數據。

另外，確保在伺服器端對接收到的數據進行驗證和過濾，以防止惡意輸入或註入攻擊。使用適當的輸入驗證和輸出編碼技術來防止跨站腳本攻擊（XSS）和 SQL 註入等安全漏洞。

5.3 防止跨站腳本攻擊和惡意數據註入

為了防止跨站腳本攻擊（XSS）和惡意數據註入，應該對用戶輸入進行適當的驗證和過濾。確保只接受預期格式和類型的數據，並對特殊字元進行轉義或過濾，以防止執行惡意代碼或破壞系統。

使用安全的編碼技術，如將用戶輸入進行 HTML 實體編碼或使用參數化查詢來防止 SQL 註入攻擊。此外，定期更新和維護應用程式的依賴庫和框架，以確保及時修補已知的安全漏洞。

在重置表單數據時，始終考慮到安全性，並採取適當的措施來保護用戶的敏感信息和系統的安全。

本文轉載於:

https://juejin.cn/post/7266632911475376167

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • linux進階：字元設備
    設計字元設備 文件系統調用系統IO的內核處理過程 inode索引節點是文件系統中的一種數據結構，用於存儲文件的元數據信息，包括文件的大小、訪問許可權、創建時間、修改時間等。每個文件在文件系統中都對應著一個唯一的inode節點，通過inode節點可以查找到文件的實際數據塊的位置。inode節點通常存儲在 ...
  • 讀高性能MySQL（第4版）筆記01_MySQL架構（上）
    ![](https://img2023.cnblogs.com/blog/3076680/202308/3076680-20230813220820722-927556191.png) # 1. 邏輯架構 ## 1.1. 大多數基於網路的客戶端/伺服器工具或伺服器都有類似的服務 ### 1.1.1. ...
  • 大模型時代的程式員：不會用AIGC編程，未來5年將被淘汰？
    ![file](https://img2023.cnblogs.com/other/3195851/202308/3195851-20230814171638731-1116543252.jpg) 作者 | 郭煒 策劃 | 凌敏 ## 前言 下麵是一段利用 Co-Pilot 輔助開發的小視頻，這是 ...
  • redis set 結構 count 大於31000的併發量會出現等於0的情況嗎？
    srandmember key [count]count: 為可選的參數 作用： 如果 count 為正數，且小於集合基數，那麼命令返回一個包含 count 個元素的數組，數組中的元素各不相同。如果 count 大於等於集合基數，那麼返回整個集合。如果 count 為負數，那麼命令返回一個數組，數組 ...
  • Redis 持久化及集群架構
    本篇技術博文將深入探討 Redis 持久化機制的原理、配置和使用方式。我們將介紹兩種常用的持久化方式：RDB 持久化和 AOF 持久化。您將瞭解到它們的工作原理、優缺點以及如何根據需求選擇合適的持久化方式。 通過深入學習 Redis 持久化及集群架構，您將能夠構建穩定、可靠並具備高可用性的 Red... ...
  • 技術分享 | kill掉mysqld_safe進程會影響mysqld進程？
    ## 1、背景 公司內部看到一則問題 > 1、kill -9 mysqld_safe 進程 > 2、systemd 檢測到 mysqld_safe 進程不存在後，重新拉起 mysqld_safe 進程 > 3、mysqld_safe 進程啟動後，發現 mysqld 進程也被重啟 期望：啟、停 mys ...
  • Prometheus監控指標查詢性能調優
    一、背景 在《SRE: Google運維解密》一書中作者指出，監控系統需要能夠有效的支持白盒監控和黑盒監控。黑盒監控只在某個問題目前正在發生，並且造成了某個現象時才會發出緊急警報。“白盒監控則大量依賴對系統內部信息的檢測，如系統日誌、抓取提供指標信息的 HTTP 節點等。白盒監控系統因此可以檢測到即 ...
  • Xcode 15 beta 6 (15A5219j) 發佈下載 - Apple 平臺 IDE
    本機環境：win10專業版，64位，16G記憶體。 原先用的AS2.2，是很早之前在看《第一行代碼Android(第2版)》的時候，按書里的鏈接下載安裝的，也不用怎麼配置。（PS：第一行代碼這本書對新手確實很適合，第1版是eclise，第2版是Android studio） 最近想給AS升級一下，果不 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類