HTML 是一种用于创建网页的标记语言，它本身并不具备保存数据到本地的功能，我们可以通过 JavaScript 和一些浏览器提供的 API（如 LocalStorage、SessionStorage 等）来实现这个功能。
（图片来源网络，侵删）
在 HTML 中，我们可以使用 <input> 标签创建表单元素，让用户输入数据，通过 JavaScript 监听表单元素的事件（如 onsubmit），获取用户输入的数据，并将其保存到浏览器的存储空间中，以下是一个简单的示例：
1、创建一个 HTML 文件，添加一个表单元素和一个按钮：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>保存数据到本地</title>
</head>
<body>
<form id="myForm">
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<br>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
<br>
<button type="button" onclick="saveData()">保存数据</button>
</form>
<script src="main.js"></script>
</body>
</html>
2、创建一个 JavaScript 文件（main.js），编写保存数据的逻辑：
function saveData() {
// 获取表单元素
const form = document.getElementById(\'myForm\');
const username = form.elements[\'username\'].value;
const password = form.elements[\'password\'].value;
// 将数据保存到本地存储（LocalStorage）中
localStorage.setItem(\'username\', username);
localStorage.setItem(\'password\', password);
}
在这个示例中，我们首先创建了一个包含用户名和密码输入框的表单，当用户点击“保存数据”按钮时，saveData 函数会被调用，这个函数首先获取表单元素，然后从表单元素中获取用户输入的数据，接下来，我们使用 localStorage.setItem 方法将数据保存到浏览器的本地存储空间中，这样，即使用户关闭浏览器并重新打开，之前保存的数据仍然可以访问。
需要注意的是，LocalStorage 只能保存字符串类型的数据，如果需要保存其他类型的数据（如对象或数组），需要先将其转换为 JSON 字符串，然后再保存，读取数据时，也需要先将 JSON 字符串转换回原始类型，以下是一个修改后的示例：
function saveData() {
// 获取表单元素
const form = document.getElementById(\'myForm\');
const username = form.elements[\'username\'].value;
const password = form.elements[\'password\'].value;
// 将数据保存到本地存储（LocalStorage）中
localStorage.setItem(\'user\', JSON.stringify({ username, password }));
}
function loadData() {
// 从本地存储（LocalStorage）中读取数据
const data = JSON.parse(localStorage.getItem(\'user\'));
console.log(data); // 输出：{ username: \'张三\', password: \'123456\' }
}
在这个示例中，我们将用户名和密码封装成一个对象，然后将其转换为 JSON 字符串并保存到 LocalStorage 中，读取数据时，我们先从 LocalStorage 中获取 JSON 字符串，然后将其转换回对象，这样，我们就可以方便地操作和访问保存的数据了。
本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/441749.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
