WebStorage存储数据

最新推荐文章于 2024-10-07 09:24:46 发布

Satoshi_ZERO

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量141

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Satoshi_ZERO/article/details/112287844

版权

这个HTML页面展示了如何使用JavaScript实现一个简单的电话簿管理应用。用户可以输入姓名、手机和地址来新增联系人信息，并通过输入姓名来查找特定联系人。此外，还提供了显示所有联系人、清除所有信息以及页面刷新的功能。所有数据通过浏览器的localStorage进行存储。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			form {
				padding: 10px;
				width: 300px;
				border: 1px solid black;
				margin: 0 auto;
				text-align: center;
			}

			input {
				margin: 5px;
			}

			table {
				/* width: 100px; */
				margin: 0 auto;
				margin-top: 50px;
				border-collapse: collapse;
			}

			tr {
				/* width: 150px; */
			}

			td {
				width: 150px;
				border: 1px solid black;
				text-align: center;
			}
		</style>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	</head>
	<body>
		<h1>电话簿管理</h1>
		<hr>
		<form action="" method="">
			<label for="name">
				姓名：
			</label>
			<input type="text" name="name" id="name" value="" />
			<br />
			<label for="phone">
				手机：
			</label>
			<input type="tel" name="phone" id="phone" value="" />
			<br>
			<label for="address">
				地址：
			</label>
			<input type="text" name="address" id="address" value="" />
			<br>
			<button type="button" onclick="add()">新增记录</button>
			<hr>
			<label for="check_name">
				输入姓名：
			</label>
			<input type="text" name="check_name" id="check_name" value="" />
			<button type="button" onclick="check()">查找信息</button>
			<hr>
			<button type="button" onclick="check_all()">显示全部</button>
			<button type="button" onclick="clearall()">清除全部</button>
			<button type="button" onclick="reload()">刷新</button>
			<!-- <button type="button" onclick="test()">测试</button> -->
		</form>

		<table id="check_table">
			<tr>
				<td>姓名</td>
				<td>手机</td>
				<td>地址</td>
			</tr>
		</table>

		<script type="text/javascript">
			function add() {
				var person = {
					name: document.getElementById("name").value,
					phone: document.getElementById("phone").value,
					address: document.getElementById("address").value
				}
				localStorage.setItem(document.getElementById("name").value, JSON.stringify(person));
				console.log("已经增加信息");
			}

			function check() {
				var check_name = document.getElementById("check_name");
				var table = document.getElementById("check_table");
				var row = table.insertRow();
				var cell1 = row.insertCell(0);
				var cell2 = row.insertCell(1);
				var cell3 = row.insertCell(2);
				cell1.innerHTML = JSON.parse(localStorage.getItem(check_name.value)).name;
				cell2.innerHTML = JSON.parse(localStorage.getItem(check_name.value)).phone;
				cell3.innerHTML = JSON.parse(localStorage.getItem(check_name.value)).address;
				console.log("查找成功");
			}

			function check_all() {
				var table = document.getElementById("check_table");
				//当前数据量
				var num = localStorage.length;
				for (var i = 0; i < num; i++) {
					var name = localStorage.key(i);
					var row = table.insertRow();
					var cell1 = row.insertCell(0);
					var cell2 = row.insertCell(1);
					var cell3 = row.insertCell(2);
					cell1.innerHTML = JSON.parse(localStorage.getItem(name)).name;
					cell2.innerHTML = JSON.parse(localStorage.getItem(name)).phone;
					cell3.innerHTML = JSON.parse(localStorage.getItem(name)).address;
				}
				console.log("查找成功");
			}

			function clearall() {
				localStorage.clear();
				console.log("已经清除信息");
			}

			function reload() {
				location.reload();
			}
			
			function test() {
				// var name = localStorage.key(0);
				// console.log("key:"+name);
				// console.log(JSON.parse(localStorage.getItem(name)).phone);
				console.log(localStorage.length);
			}
		</script>
	</body>
</html>