cookie

来源：互联网发布：个人博客推荐知乎编辑：程序博客网时间：2024/06/10 12:44

1.概念：网站为了辨别用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
2.为什么要有cookie：我们用变量存储数据在关闭页面时会销毁。如果我们需要一段时间内保存数据，但又不至于使用后端数据库去存储的东西就可以用cookie来存储。例如，当用户访问了某个网站时，我们就可以通过cookie来向访问者电脑上储存数据。
3.注意：
A.不同的浏览器存放的cookie位置不同，不能通用。
B.cookie的存储是以域名的形式区分的。
C.cookie的数据可以设置名字。
D.一个域名下存放的cookie的个数是有限制的。
E.每个cookie存放的内容大小也有限制。

4.cookie的存储方式

document.cookie = 'username = liang ';//可读可写

注意：A.在IE和FF下可以使用，而chrome里禁止本地使用；
B.通过document.cookie获取当前网站的cookie时，得到的是字符串形式的值，包含当前网站下所有cookie，不同的值用分号+空格分开；
C.如果我们想长时间存放一个cookie，需要在设置它的时候同时设置一个过期事件document.cookie = 'username=liang;expires='+时间，这个时间必须是字符串，默认是临时存储，例如oDate.setDate(oDate.getDate()+5)
D.上述方法在IE里可能会有问题，用oDate.toGMTString()转成日期字符串就好了。
E.内容最好编码存放，encodeURL();
例如，

alert(encodeURL('你好\n你好'))；得到的值再用alert（decodeURL('得到的值')）弹出

5.接下来封装设置cookie、获取cookie（只获取有用值而不是全部）、删除cookie的方法。

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><script>document.cookie = 'usename=wei';document.cookie = 'id=1';document.cookie = 'sex=男';setCookie('usename','wei',30);function setCookie(key,value,t){    var oDate = new Date();    oDate.setDate(oDate.getDate()+t);    document.cookie=key+'='+value+';expires='+oDate.toGMTString();}function getCookie(key){    var arr1 = document.cookie.split('; ');    for(var i=0;i<arr1.length;i++){    var arr2 = arr1[i].split('=');    if(arr2[0]==key){return decodeURI(arr2[1]);}}}alert(getCookie('id'));function removeCookie(key){    setCookie(key,'',-1);}removeCookie('usename');</script></body></html>

练习4：做一个表单，包含一个输入框一个提交和一个删除按钮，点击提交的时候把username的内容保存在cookie里，每当打开该页面时判断一下如果getcookie(‘username’)存在就在自动把用户名输入进去，点击删除按钮时，把这个cookie和输入框的内容全部删除

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">#btn1,#btn2{cursor:pointer;}</style></head><body>    <input type="text" id="text1" placeholder="请输入内容" />    <button id="btn1">提交</button>    <button id="btn2">删除cookie</button>    <script>        var oText=document.getElementById("text1");        var oBtn1=document.getElementById("btn1");        var oBtn2=document.getElementById("btn2");        oBtn1.onclick=function(){            if(oText.value!=''){                setCookie('username',oText.value,30);            }            alert(getCookie('username'));        }        oBtn2.onclick=function(){            removeCookie('username');            alert(getCookie('username'));            oText.value='';        }        window.onload=function(){            if(getCookie('username')!=null&&getCookie('username')!=''){                alert("1"+getCookie('username'));                oText.value=getCookie('username');            }else{                oText.value='';            }        }        function setCookie(key,value,t){            var oDate = new Date();            oDate.setDate(oDate.getDate()+t);            document.cookie=key+'='+value+';expires='+oDate.toGMTString();        }        function getCookie(key){            var arr1 = document.cookie.split('; ');            for(var i=0;i<arr1.length;i++){                var arr2 = arr1[i].split('=');                if(arr2[0]==key){return decodeURI(arr2[1]);}            }        }        function removeCookie(key){            setCookie(key,'',-1);        }    </script></body></html>

阅读全文

0 0