Coookie的设置、获取、清除操作

<html>
<head>
<style>

span:nth-of-type(3){background:red;}
div{
    padding:20px;
    margin:20px;
}
style>
<title>Coookie的设置、获取、清除操作title>

head>

<body>
<div id="div1">
<div>姓名:<input type="text" class="name">div>
<div>年龄:<input type="text" class="age">div>
<div>身高:<input type="text" class="hight">div>
<div>留言:<textarea class="fb_back">textarea>
div>
<div>姓名:<span class="spanname">span>div>
<div>年龄:<span class="spanage">span>div>
<div>身高:<span class="spanhight">span>div>
<div>留言:<span class="spanfb_back">span>textarea>
div>
<button class="setcookie">提交kookiebutton>
<button class="getcookie">获取kookiebutton>
<button class="clearcookie">清除kookiebutton>
body>
html>
<script type="text/javascript">
    var setBtn = document.getElementsByClassName("setcookie")[0];
    var getBtn = document.getElementsByClassName("getcookie")[0];
    var clearBtn = document.getElementsByClassName("clearcookie")[0];
    setBtn.onclick = function(){
        var name = document.getElementsByClassName("name")[0].value;
        var age = document.getElementsByClassName("age")[0].value;
        var hight = document.getElementsByClassName("hight")[0].value;
        var fb_back = document.getElementsByClassName("fb_back")[0].value;
        setCookie("name", name, 5);
        setCookie("age", age, 5);
        setCookie("hight", hight, 5);
        setCookie("fb_back", fb_back, 5);
        /*
        document.cookie  = 'name='+name;
        document.cookie  = 'age='+age;
        document.cookie  = 'hight='+hight;
        document.cookie  = 'fb_back='+fb_back;
        */
        console.log(document.cookie);
    }
    getBtn.onclick = function(){
        var name = getCookie("name");
        var age = getCookie("age");
        var hight = getCookie("hight");
        var fb_back = getCookie("fb_back");
        var spanname = document.getElementsByClassName("spanname")[0];
        var spanage = document.getElementsByClassName("spanage")[0];
        var spanhight = document.getElementsByClassName("spanhight")[0];
        var spanfb_back = document.getElementsByClassName("spanfb_back")[0];
        spanname.innerHTML = name;
        spanage.innerHTML = age;
        spanhight.innerHTML = hight;
        spanfb_back.innerHTML = fb_back;
    }

    clearBtn.onclick = clearCookie;


    //设置kookie
    function setCookie(name, value, iDay){   
    /* iDay 表示过期时间   
    cookie中 = 号表示添加,不是赋值 */   
    var oDate=new Date();   
    oDate.setDate(oDate.getDate()+iDay);       
    document.cookie=name+'='+value+';expires='+oDate;
    }


    //获取kookie
    function getCookie(name){
        /* 获取浏览器所有cookie将其拆分成数组 */   
        var arr=document.cookie.split('; ');  

        for(var i=0;i/* 将cookie名称和值拆分进行判断 */       
            var arr2=arr[i].split('=');               
            if(arr2[0]==name){           
                return arr2[1];       
            }   
        }       
        return '';
    }

    //清空所有cookie;
    function clearCookie(){
        var cookie = document.cookie;
        var cookieArray = cookie.split("; ");   //将所有键值对分开
        var cookieKey = [];     //保存cookie中键值名的数组
        for(var i = 0;ivar keyValue = cookieArray[i].split("=");
            cookieKey[cookieKey.length] = keyValue[0];  //将对应的cookie的键存入数组中
        }
        for(var i = 0;i1,-1);   //只要将cookie的保存日期设置为-1就可以清除kookie
        }
        console.log("已经成功清除所有cookie信息!");
    }

script>

你可能感兴趣的:(web前端,javascript)