案例需求
1)点击“注册”按钮时,将数据添加到表格中
2)关闭页面,重新打开时,若已有注册用户,表格中需要显示已注册用户
3)点击“删除”按钮时,删除该用户
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{width: 500px;border: 1px solid gray;border-collapse: collapse;margin-top: 50px;}
th,td{text-align: center;line-height: 35px;border: 1px solid gray;}
</style>
</head>
<body>
<h2>用户注册</h2>
<label for="">用户名:</label><input type="text" id="txt-name"><br>
性别:<input type="radio" name="sex" checked>男<input type="radio" name="sex">女<br>
<label for="">密码</label> <input type="password" id="pwd1"><br>
<label for="">重复密码</label> <input type="password" id="pwd2"><br>
<label for="">电话:</label><input type="text" id="txt-tel"><br>
<button>注册</button>
<table>
<thead>
<tr>
<th>用户名</th>
<th>密码</th>
<th>性别</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//查找元素
var txtName=document.getElementById('txt-name');
var radios=document.getElementsByName('sex');//性别
var txtPwd1=document.getElementById('pwd1');
var txtPwd2=document.getElementById('pwd2');
var txtPhone=document.getElementById('txt-tel');
var tbody=document.querySelector('tbody');//表格
var KEY="userarr";//存储用户数据的key
init();//初始化页面
//注册
document.querySelector('button').onclick=function(){
//读取输入框中的内容
var userName=txtName.value.trim();
var pwd=txtPwd1.value.trim();
var rePwd=txtPwd2.value.trim();
var sex;//性别
if(radios[0].checked){
sex='男';
}else{
sex='女';
}
var tel=txtPhone.value.trim();
//判断输入框是否由内容
if(userName==''||pwd==""||rePwd==''||tel==''){
alert('用户名、密码、电话均不能为空!');
return;
}
if(rePwd!=pwd){
alert('两次输入的密码不一致!');
return ;
}
//将数据存储到本地
var person=new Person(userName,pwd,tel,sex);
saveData(person);
//将数据添加到表格中
addDataToTable(person);
};
//初始化页面
function init(){
var arr=getData();//从本地取数据
if(arr.length==0){
return;//本地无数据,不执行
}
//将本地数据显示到表格中
arr.forEach(function(item){
addDataToTable(item);
});
}
//将数据存入本地
function saveData(obj){
var arr=getData();//取出本地保存的数据
arr.push(obj);
//将对象转换为字符串
var s=JSON.stringify(arr);
localStorage.setItem(KEY,s);
}
//从本地取数据
function getData(){
var s=localStorage.getItem(KEY);
if(s==null){
return [];//若为第一次使用,本地无数据,返回值为null,启用新数组
}
return JSON.parse(s);
}
//根据电话删除数据
function delData(tel){
var arr=getData();
//遍历数据
for(var i in arr){
if(arr[i].tel===tel){
arr.splice(i,1);//删除该人
break;
}
}
//将删除后的数据保存到本地
localStorage.setItem(KEY,JSON.stringify(arr));
}
//将数据添加到表格中
function addDataToTable(person){
var tr=tbody.insertRow();
addTd(tr,person.username);//添加用户名列
addTd(tr,person.pwd);//添加密码列
addTd(tr,person.sex);//性别
addTd(tr,person.tel);//电话
addDelTd(tr);//添加删除列
tbody.appendChild(tr);//将行插入表格中
}
//tr 行对象 cnt 列内容
function addTd(tr,cnt){
var td=tr.insertCell();
td.innerHTML=cnt;
return td;
}
//add delete td
function addDelTd(tr){
var td=tr.insertCell();//创建列
var link=document.createElement('a');
link.href="javascript:void(0)";
link.innerHTML='删除';
link.onclick=function(){
var myTr=this.parentNode.parentNode;
//1.从表格中删除数据
myTr.parentNode.removeChild(myTr);
//2.将数据从本地移除
delData(myTr.children[3].innerHTML);
};
//将超链接放入列中
td.appendChild(link);
return td;
}
//构造函数
function Person(username,pwd,tel,sex){
this.username=username;
this.pwd=pwd;
this.tel=tel;
this.sex=sex;
}
</script>
</body>
</html>