cookie的知識點

時間 2019-12-09

標籤 cookie 知識欄目 HTML 简体版

原文原文鏈接

1. Cookie的做用：css

a) 在客戶端保存必定的信息；html

b) 自動登陸、記住用戶名等；瀏覽器

2. Cookie和網頁緩存:緩存

a) 沒有關係；cookie

b) Cookie徹底由JS控制；dom

3. Cookie的特性：網站

a) 同一個網站中的全部頁面共享一套Cookie;this

b) Cookie的數量和整體積都是有限的；spa

c) Cookie有保質期的，過時後自動消失；code

4. JS中使用cookie:

a) cookie是document上的一個屬性；

b) document.cookie;

c) cookie像銀行同樣，先要往裏存錢，而後才能取錢；

5. 設置cookie:

a) 名字 = 值；document.cookie = "user=aaa";

b) Cookie中等號是添加的意思、不是賦值，添加多個時不會覆蓋；

c) 如不指定過時時間，瀏覽器關閉時就會消失；

d) 過時時間的指定：document.cookie = "user=aaa;expires="+oDate;

e) 每一條cookie均可以有本身獨立的過時日期；

f) 封裝：setCookie(name, value, iDay);

6. 獲取cookie:

a) 兩次split分割字符串：

i. 'username=abc; password=123456; aaa=123';

ii. arr->['username=abc', 'passname=123456', ....]

iii. arr2->['username', 'abc']

7. 刪除cookie:

a) 將指定name的cookie項的expires =-1;

8. Cookie使用實例：

a) Cookie_結合拖拽：用cookie記錄上一次Div的位置

i. 在鼠標擡起時，記錄位置；

ii. 在window.onload時，讀取位置；

b) 用Cookie記錄上次登陸的用戶名：

i. onsubmit：記錄用戶名；

ii. window.onload時：獲取用戶名；

若是不設置過時時間，則表示這個cookie生命週期爲瀏覽器會話期間，只要關閉瀏覽器窗口，cookie就消失了。這種生命期爲瀏覽器會話期的cookie被稱爲會話cookie。會話cookie通常不保存在硬盤上而是保存在內存裏。

若是設置了過時時間，瀏覽器就會把cookie保存到硬盤上，關閉後再次打開瀏覽器，這些cookie依然有效直到超過設定的過時時間。

cookie包括：name,value,domain,path,expires

cookie.js:

//設置cookie
function setCookie(name,value,iDay){
    if(iDay){
        var oDate = new Date();
        oDate.setDate(oDate.getDate()+iDay);
        document.cookie = name+'='+value+'; PATH=/; EXPIRES='+oDate;        
    }else{
        document.cookie = name+'='+value+'; PATH =/';         
    }
}

//讀取
function getCookie(name){
    var arr =  document.cookie.split('; ');
    for(var i = 0;i<arr.length;i++){
        if(arr[i].split('=')[0] == name){
            return arr[i].split('=')[1];
        }
    }
    return '';
}

//借刀殺人
function removeCookie(name){
    setCookie(name,1,-1);
}

選項卡:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box .on{ background:red;}
            #box div{width:200px;height:200px; background:#ccc; display:none;}
        </style>
        <script src='cookie.js'></script>
        <script>
            window.onload = function(){
                    var oBox = document.getElementById('box');
                    var aBtn = oBox.getElementsByTagName('input');    
                    var aDiv = oBox.getElementsByTagName('div');
                    var count=getCookie('count')||0;
                    if(count){
                        tab();
                    }
                    for(var i = 0;i<aBtn.length;i++){
                        (function(index){
                            aBtn[i].onclick = function(){
                                count=index;
                                setCookie('count',count,2);
                                tab();
                            }
                        })(i)
                    }    
                  function tab(){
                         for(var i = 0;i<aBtn.length;i++){
                             aBtn[i].className = '';
                             aDiv[i].style.display = 'none';
                         }
                        aBtn[count].className = 'on';
                        aDiv[count].style.display = 'block';
                    };
    };
        </script>
    </head>
    <body>
        <div id="box">
        <input type="button" value="小說" class="on">
        <input type="button" value="電影">
        <input type="button" value="音樂">
        <div style="display:block">夢裏花落知道多</div>
        <div>寒戰2</div>
        <div>若是你也據說</div>
    </div>
    </body>
</html>

拖拽:

<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com">
<meta name="copyright" content="智能社 - zhinengshe.com">
<title>智能社 - www.zhinengshe.com</title>
<style>
    #div1{width:100px;height:100px; background:red; position:absolute;left:0; top:0;}
</style>
<script src="cookie.js"></script>
<script>
window.onload=function(){
    var oBox=document.getElementById("div1");
    var x=getCookie('x')||0;    //若是是第一次則座標爲0;不然爲上一次存儲的座標;
    var y=getCookie('y')||0;
    oBox.style.left=x+'px';
    oBox.style.top=y+'px';
    oBox.onmousedown=function(ev){
        var e=ev||event;
        var disX=e.clientX-oBox.offsetLeft;
        var disY=e.clientY-oBox.offsetTop;
        document.onmousemove=function(ev){
            var e=ev||event;
            var l=e.clientX-disX;
            var t=e.clientY-disY;
            oBox.style.left=l+'px';
            oBox.style.top=t+'px';
        }
        document.onmouseup=function(){
            setCookie('x',oBox.offsetLeft,2);   //鼠標擡起以後設置oBox位置
            setCookie('y',oBox.offsetTop,2);
            document.onmousemove=null;
            document.onmouseup=null;
            oBox.releaseCapture&&oBox.releaseCapture();
        }
        oBox.setCapture&&oBox.setCapture();
        return false;
    }
}

</script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

換膚:

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link  id='li' rel="stylesheet" href="skin1.css" />
        <script src="cookie.js"></script>
        <style>
            #box{color:#fff}
        </style>
        <script>
            window.onload=function(){
                var aInput=document.getElementsByTagName('input');
                var oA=document.getElementById('li');
                var count=getCookie('count')||0;         //開始時取0;後期取前一次存儲的值;
                oA.href=arr[count];
                var arr=['skin1.css','skin2.css','skin3.css'];
                for(var i=0;i<aInput.length;i++){
                    (function(index){
                        aInput[index].onclick=function(){
                            count=index;                  //用於記住當前點擊的按鈕
                            setCookie('count',count,2);  //設置count到cookie中，用於獲取
                            oA.href=arr[count];
                        }
                    })(i)
                }
            };
        </script>
    </head>
    <body style="height:2000px;">
        <div id="box">
            <input type="button" value="變藍" />
            <input type="button" value="變紅" />
            <input type="button" value="變綠" />
        </div>
    </body>
</html>

記住我:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="cookie.js"></script>
        <script>
            window.onload=function(){
                var oBtn=document.getElementById("btn");
                var oUser=document.getElementById("user");
                oBtn.onclick=function(){
                    if(this.checked){        //若是複選框選中,設置cookie存儲,複選框取消,刪除cookie;
                        setCookie('user',oUser.value,2);
                    }else{removeCookie('user');}
                }
                if(getCookie('user')){          //若是cookie值存在則讓複選框選中,同時讓輸入框的值爲上一次保存的值
                    oUser.value=getCookie('user');
                    oBtn.checked=true;
                }
            }
        </script>
    </head>
    <body>
        用戶名:<input type="text" id='user'/><br />
        <input type="checkbox"  id='btn'/>記住我
    </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。