在JavaScript中存储多个表单的方法包括使用本地存储、会话存储、数据库或者服务器端存储。其中，本地存储和会话存储是比较常见且简便的方式。下面将详细介绍如何使用本地存储来存储多个表单，并给出示例代码。
使用本地存储（LocalStorage）来保存表单数据是一个很好的选择，因为它允许您在用户的浏览器中存储数据，数据可以在多个页面会话中保持持久。与之相对应的会话存储（SessionStorage）则只在用户会话期间有效，当页面会话结束（如关闭浏览器）后，数据将被清除。
一、本地存储（LocalStorage）
1、存储和读取数据
本地存储是 HTML5 的一部分，允许在浏览器中以键值对的形式存储数据。它具有持久性，即使用户关闭浏览器，数据仍然存在。要使用本地存储，您可以使用以下方法：
// 存储数据
localStorage.setItem('form1', JSON.stringify(form1Data));
localStorage.setItem('form2', JSON.stringify(form2Data));
// 读取数据
let form1Data = JSON.parse(localStorage.getItem('form1'));
let form2Data = JSON.parse(localStorage.getItem('form2'));
2、示例代码：存储和读取多个表单数据
下面是一个示例代码，演示如何使用本地存储保存和读取多个表单的数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Forms Storage</title>
</head>
<body>
<form id="form1">
<label for="name1">Name:</label>
<input type="text" id="name1" name="name1">
<label for="email1">Email:</label>
<input type="email" id="email1" name="email1">
<button type="button" onclick="saveFormData('form1')">Save Form 1</button>
</form>
<form id="form2">
<label for="name2">Name:</label>
<input type="text" id="name2" name="name2">
<label for="email2">Email:</label>
<input type="email" id="email2" name="email2">
<button type="button" onclick="saveFormData('form2')">Save Form 2</button>
</form>
<button type="button" onclick="loadFormData()">Load Form Data</button>
<script>
function saveFormData(formId) {
const form = document.getElementById(formId);
const formData = {
name: form.querySelector('[name="name' + formId.substr(-1) + '"]').value,
email: form.querySelector('[name="email' + formId.substr(-1) + '"]').value
};
localStorage.setItem(formId, JSON.stringify(formData));
alert(formId + ' data saved.');
}
function loadFormData() {
for (let i = 1; i <= 2; i++) {
const formId = 'form' + i;
const formData = JSON.parse(localStorage.getItem(formId));
if (formData) {
document.querySelector('#' + formId + ' [name="name' + i + '"]').value = formData.name;
document.querySelector('#' + formId + ' [name="email' + i + '"]').value = formData.email;
}
}
alert('Form data loaded.');
}
</script>
</body>
</html>
二、会话存储（SessionStorage）
1、使用方法
会话存储与本地存储类似，但它的数据仅在会话期间存在。当用户关闭浏览器或页面时，会话存储的数据将被清除。
// 存储数据
sessionStorage.setItem('form1', JSON.stringify(form1Data));
sessionStorage.setItem('form2', JSON.stringify(form2Data));
// 读取数据
let form1Data = JSON.parse(sessionStorage.getItem('form1'));
let form2Data = JSON.parse(sessionStorage.getItem('form2'));
2、示例代码：存储和读取多个表单数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Storage for Multiple Forms</title>
</head>
<body>
<form id="form1">
<label for="name1">Name:</label>
<input type="text" id="name1" name="name1">
<label for="email1">Email:</label>
<input type="email" id="email1" name="email1">
<button type="button" onclick="saveFormData('form1')">Save Form 1</button>
</form>
<form id="form2">
<label for="name2">Name:</label>
<input type="text" id="name2" name="name2">
<label for="email2">Email:</label>
<input type="email" id="email2" name="email2">
<button type="button" onclick="saveFormData('form2')">Save Form 2</button>
</form>
<button type="button" onclick="loadFormData()">Load Form Data</button>
<script>
function saveFormData(formId) {
const form = document.getElementById(formId);
const formData = {
name: form.querySelector('[name="name' + formId.substr(-1) + '"]').value,
email: form.querySelector('[name="email' + formId.substr(-1) + '"]').value
};
sessionStorage.setItem(formId, JSON.stringify(formData));
alert(formId + ' data saved.');
}
function loadFormData() {
for (let i = 1; i <= 2; i++) {
const formId = 'form' + i;
const formData = JSON.parse(sessionStorage.getItem(formId));
if (formData) {
document.querySelector('#' + formId + ' [name="name' + i + '"]').value = formData.name;
document.querySelector('#' + formId + ' [name="email' + i + '"]').value = formData.email;
}
}
alert('Form data loaded.');
}
</script>
</body>
</html>
三、使用数据库（IndexedDB）
1、介绍
IndexedDB 是一种低级 API，用于客户端存储大量结构化数据，包括文件/二进制数据。这个 API 采用异步操作的设计，可以处理大量数据而不会阻塞用户界面。
2、示例代码：存储和读取多个表单数据
let db;
let request = indexedDB.open("FormsDatabase", 1);
request.onerror = function(event) {
console.log("Database error: " + event.target.errorCode);
};
request.onsuccess = function(event) {
db = event.target.result;
};
request.onupgradeneeded = function(event) {
db = event.target.result;
let objectStore = db.createObjectStore("forms", { keyPath: "id" });
objectStore.createIndex("name", "name", { unique: false });
objectStore.createIndex("email", "email", { unique: false });
};
function saveFormData(formId) {
const form = document.getElementById(formId);
const formData = {
id: formId,
name: form.querySelector('[name="name' + formId.substr(-1) + '"]').value,
email: form.querySelector('[name="email' + formId.substr(-1) + '"]').value
};
let transaction = db.transaction(["forms"], "readwrite");
let objectStore = transaction.objectStore("forms");
let request = objectStore.put(formData);
request.onsuccess = function(event) {
alert(formId + ' data saved.');
};
request.onerror = function(event) {
console.log("Unable to save data: " + event.target.errorCode);
};
}
function loadFormData() {
let transaction = db.transaction(["forms"], "readonly");
let objectStore = transaction.objectStore("forms");
for (let i = 1; i <= 2; i++) {
let request = objectStore.get('form' + i);
request.onsuccess = function(event) {
let formData = request.result;
if (formData) {
document.querySelector('#form' + i + ' [name="name' + i + '"]').value = formData.name;
document.querySelector('#form' + i + ' [name="email' + i + '"]').value = formData.email;
}
};
}
}
四、服务器端存储
1、介绍
对于需要长期保存的数据，或者需要在不同设备上共享的数据，可以考虑将表单数据存储在服务器端。服务器端存储需要通过 API 与服务器进行通信。
2、示例代码：使用 Fetch API 提交表单数据到服务器
function saveFormData(formId) {
const form = document.getElementById(formId);
const formData = {
name: form.querySelector('[name="name' + formId.substr(-1) + '"]').value,
email: form.querySelector('[name="email' + formId.substr(-1) + '"]').value
};
fetch('https://your-server-endpoint.com/saveFormData', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ formId, formData })
})
.then(response => response.json())
.then(data => {
alert(formId + ' data saved.');
})
.catch((error) => {
console.error('Error:', error);
});
}
function loadFormData(formId) {
fetch(`https://your-server-endpoint.com/getFormData?formId=${formId}`)
.then(response => response.json())
.then(data => {
document.querySelector('#' + formId + ' [name="name' + formId.substr(-1) + '"]').value = data.formData.name;
document.querySelector('#' + formId + ' [name="email' + formId.substr(-1) + '"]').value = data.formData.email;
})
.catch((error) => {
console.error('Error:', error);
});
}
以上方法均可用于存储和读取多个表单数据，根据具体需求选择合适的存储方式。对于大多数前端应用，本地存储和会话存储已经足够，但对于需要更高数据持久性或共享的应用，可以考虑使用数据库或服务器端存储。
相关问答FAQs：
1. 如何在JavaScript中存储多个表单数据？
在JavaScript中，可以使用对象或数组来存储多个表单数据。可以创建一个对象，将每个表单字段的名称作为对象属性，将对应的值作为属性值进行存储。或者可以创建一个数组，每个数组元素存储一个表单的数据。
2. 如何将多个表单数据存储到一个对象中？
可以通过遍历表单的字段，将每个字段的名称作为对象属性，将对应的值作为属性值来存储到一个对象中。可以使用JavaScript中的querySelectorAll方法来获取所有表单字段的DOM元素，然后使用循环遍历每个字段，将其名称和值存储到对象中。
3. 如何将多个表单数据存储到一个数组中？
可以在表单提交时，使用JavaScript监听表单的提交事件，然后获取表单中的所有字段的值，并将这些值存储到一个数组中。可以使用JavaScript中的querySelectorAll方法来获取所有表单字段的DOM元素，然后使用循环遍历每个字段，将其值存储到数组中。
文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3749884
