cookie

最新推荐文章于 2024-10-25 07:15:00 发布

pleasecallme_522

最新推荐文章于 2024-10-25 07:15:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript学习文章标签： cookie

本文链接：https://blog.csdn.net/pleasecallme_522/article/details/59111213

javascript学习专栏收录该内容

23 篇文章

订阅专栏

cookie
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>