H5保存联系人
时间: 2023-11-22 17:54:41 浏览: 44
要在H5中保存联系人,可以使用HTML5的Web存储技术(如localStorage或sessionStorage)来存储联系人信息,或者通过AJAX将联系人信息保存到服务器端的数据库中。
以下是使用localStorage来保存联系人信息的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>H5保存联系人</title>
</head>
<body>
<h1>联系人列表</h1>
<ul id="contact-list"></ul>
<h2>添加联系人</h2>
<form id="add-contact-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="phone">电话:</label>
<input type="text" id="phone" name="phone"><br>
<input type="submit" value="保存">
</form>
<script>
// 获取已保存的联系人列表
var contacts = JSON.parse(localStorage.getItem('contacts')) || [];
// 显示联系人列表
var contactList = document.getElementById('contact-list');
for (var i = 0; i < contacts.length; i++) {
var contact = contacts[i];
var li = document.createElement('li');
li.textContent = contact.name + ' (' + contact.phone + ')';
contactList.appendChild(li);
}
// 添加联系人表单提交事件
var addContactForm = document.getElementById('add-contact-form');
addContactForm.addEventListener('submit', function(event) {
event.preventDefault();
var name = document.getElementById('name').value;
var phone = document.getElementById('phone').value;
contacts.push({ name: name, phone: phone });
localStorage.setItem('contacts', JSON.stringify(contacts));
alert('联系人已保存');
location.reload();
});
</script>
</body>
</html>
```
在这个示例中,我们使用localStorage来存储联系人信息。当页面加载时,我们从localStorage中获取已保存的联系人列表,并将它们显示在页面上。当用户提交添加联系人表单时,我们将新联系人信息添加到联系人列表中,并将整个联系人列表重新保存到localStorage中。最后,我们使用location.reload()方法刷新页面,以便更新联系人列表。