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

来源：互联网发布：网络游戏发展史知乎编辑：程序博客网时间：2024/06/07 11:00
<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">提交kookie</button><button class="getcookie">获取kookie</button><button class="clearcookie">清除kookie</button></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<arr.length;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;i<cookieArray.length;i++){            var keyValue = cookieArray[i].split("=");            cookieKey[cookieKey.length] = keyValue[0];  //将对应的cookie的键存入数组中        }        for(var i = 0;i<cookieKey.length;i++){            setCookie(cookieKey[i],1,-1);   //只要将cookie的保存日期设置为-1就可以清除kookie        }        console.log("已经成功清除所有cookie信息！");    }</script>
0 0