用js 实现本地存储数据

注册

用户名：
密   码：
性   别：男女
电   话：
注册

<div class="right">
    <table>
        <caption>人员信息表</caption>
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>性别</th>
                <th>电话</th>
                <th>删除</th>
            </tr>
        </thead>
        <tbody> </tbody>
    </table>
</div>

<script type="text/javascript">

    /*
        1）点击注册按钮，注册人员信息，在右边表格中(人员信息表)出现新增人员信息
        2）关闭页面，重新打开页面后，人员信息表中依然有已注册人员信息
        3)点击删除按钮，将人员移除(重新打开页面后，该人员也不存在)
    */

    //查找元素
    var use=document.querySelector('.name');
    var pwd=document.querySelector('.pawd');
    var tel=document.querySelector('.tel');
    var gs=document.getElementsByName('sex');
    var tbody=document.querySelector('tbody');
    var KEY='201907022026' //数据保存在本地时的key  (时间戳)

    // console.log(use,pwd,tel,gs,tbody);
    //初始化页面
    init();

    //注册事件
    document.querySelector('.btn').onclick=function(){
        //读取页面数据
        var gender=getGender();
        //数据校验
        //将数据写入本地
        writeDate(use.value,pwd.value,tel.value,gender);
        //将数据写入表格 在表格中追加行
        newTr(use.value,pwd.value,gender,tel.value);
    };

    //初始化页面
    function init(){
        var arr=getData();
        if(arr==undefined){ //判断是否有数据
            return; //本地无数据
        };    
        //遍历数组
        arr.forEach(function(obj){
            newTr(obj.username,obj.pwd,obj.gender,obj.tel);
        });
    }

    //创建行
    function newTr(username,pwd,gender,tel){
        var tr=tbody.insertRow(); //插入行
        tr.insertCell().innerHTML=username;// 插入列  用户名
        tr.insertCell().innerHTML=pwd; //密码
        tr.insertCell().innerHTML=gender; //性别
        tr.insertCell().innerHTML=tel; //电话

        var td=tr.insertCell(); //最后一列单独设置  删除
        var link=document.createElement('a');
        link.href='javascript:void(0)'; //阻止默认事件
        link.innerHTML='删除';
        //添加点击事件
        link.onclick=function(){
            //1.在表格中删除行
            var dTr=this.parentNode.parentNode; //行对象
            dTr.parentNode.removeChild(dTr); //删除
            //2.删除本地数据
            var usernane=dTr.children[0].innerHTML;// 被删除对象的用户名
            deleteData(username);
        };
        td.appendChild(link); //将超链接放入td中
    }

    //将数据写入本地
    function writeDate(username,pwd,tel,gender){
        var user=new User(username,pwd,tel,gender); //创建一个用户对象
        //判断本地是否已有数据，若没有数据则认为是第一次，否则，追加数据
        var arr=getData();
        if(arr==undefined){
            //第一次
            arr=[];
        }
        arr.push(user); //将数据添加到数组中
        //将数组写入本地
        localStorage.setItem(KEY,JSON.stringify(arr));
    }

    //从本地获取数据
    function getData(){
        var strUser=localStorage.getItem(KEY);
        return JSON.parse(strUser);//返回值为数组 (JSON.parse： 将字符串转换为对象 数组)
    }

    //获取被选中的性别
    function getGender(){
        var gender;//性别
        for(var i=0; i<gs.length; i++){
            if(gs[i].checked){ //判断值是否被勾中
                if(gs[i].value=='0'){ //判断勾中的value值是否等于0
                    gender='女';
                }else{
                    gender='男';
                }
            }
        }
        return gender;
    }

    //删除数据
    function deleteData(){
        var arr=getData();
        //遍历数组
        for( var i in arr){
            var obj=arr[i]; //用户对象
            if(obj.username==username){
                arr.splice(i,1); //删除对象
                break; //找到数据，结束循环
            }
        }
        //将删除后的数据写入本地
        localStorage.setItem(KEY,JSON.stringify(arr));
    }

    //用户构造函数
    function User(username,pwd,tel,gender){
        this.username=username;
        this.pwd=pwd;
        this.tel=tel;
        this.gender=gender;
    }


</script>