今天的码农女孩做了关于cookie和localStorage的练习

 css部分

<style>

        .box{height: 200px;border:5px solid black}

</style>

html部分

<form name="f1" action="">

        <p>姓名:<input type="text" name="user"></p>

        <p>性别:<input type="radio" name="sex" value="男">男

            <input type="radio" name="sex"  value="女">女

        </p>

        <p>年龄:<input type="text" name="age"></p>

        <p>学号:<input type="text" name="uid"></p>

        <p><input type="button" class="add" value="添加"> </p>

    </form>

    <button class="del">删除</button>

    <div class="box"></div>

js部分

       var add=document.querySelector(".add")

        var del=document.querySelector(".del")

        var div=document.querySelector(".box")

        //localStorage

        add.οnclick=function(){

            var u=f1.user.value

            var s=f1.sex.value

            var age=f1.age.value

            var id=f1.uid.value

            localStorage.setItem("user",u)

            localStorage.setItem("sex",s)

            localStorage.setItem("age",age)

            localStorage.setItem("id",id)

            div.innerHTML="编号"+localStorage.getItem("id")+

                        "<br>姓名："+localStorage.getItem("user")+

                        "<br>年龄:"+localStorage.getItem("age")+

                        "<br>性别:"+localStorage.getItem("sex")

        }

        del.οnclick=function(){

            localStorage.clear()

            div.innerHTML=""

        }

        //cookie

        function getCookie(attr){

            var arr=document.cookie.split(";")

            for(var i=0;i<arr.length;i++){

               var v=arr[i].split("=")

               if(v[0].trim()==attr){

                    return v[1]

               }    

            }

            return ""

        }

        function addCookie(attr,value,time){

            document.cookie=attr+"="+value+";expires="+time

        }

        function delCookie(attr){

            var t=new Date()

            t.setDate(t.getDate()-1)

            document.cookie=attr+"="+";expires="+t

        }

        add.οnclick=function(){

            var u=f1.user.value

            var s=f1.sex.value

            var age=f1.age.value

            var id=f1.uid.value

            addCookie("user",u)

            addCookie("sex",s)

            addCookie("age",age)

            addCookie("id",id)

            div.innerHTML="编号"+getCookie("id")+

                        "<br>姓名："+getCookie("user")+

                        "<br>年龄:"+getCookie("age")+

                        "<br>性别:"+getCookie("sex")

        }

        del.οnclick=function(){

            delCookie("user")

            delCookie("sex")

            delCookie("age")

            delCookie("id")

            div.innerHTML=""

        }