有關(guān)cookie的知識(shí)

定義

??cookie的中文意思為臨時(shí)存儲(chǔ)數(shù)據(jù)，對(duì)于前端初學(xué)者而言只要知道cookie的兩個(gè)用法怎么存cookie與怎么取cookie即可。
??在說明cookie的用法前先說一下服務(wù)器。服務(wù)器包括：數(shù)據(jù)庫環(huán)境（存儲(chǔ)賬號(hào)密碼）、語言環(huán)境（php等）、服務(wù)器環(huán)境。在這種情況下我們需要一個(gè)集成環(huán)境來配合講解cookie。我們可以下載windows常用的php開發(fā)集成環(huán)境wamp軟件。wamp軟件涵蓋了：windows（操作系統(tǒng)） 、Apache(服務(wù)器) 、mySql（數(shù)據(jù)庫） 、PHP（后臺(tái)語言） 等幾個(gè)要素，小伙伴們只需要下載好wamp成功安裝后便可以開搞啦。在大家安裝好以后在下方的工具條會(huì)出現(xiàn)綠色的圖標(biāo)證明環(huán)境安裝已經(jīng)成功可以使用了。

Paste_Image.png

我們?cè)诎惭b好以后使用代碼編輯器時(shí)要將相應(yīng)的文件夾建立在wamp文件下的www文件目錄中

Paste_Image.png

在做好這些準(zhǔn)備后我們可以開始啦！
我們說cookie需要會(huì)的是兩點(diǎn)——怎么存cookie與怎么取cookie。
最簡單的存法如：document.cookie=123;這樣我們就在瀏覽器中存了一條cookie，不過它沒有名字是沒有意義的。升級(jí)一下:document.cookie='abc=123'這個(gè)意思是指存了一條名字為abc值為123的cookie。好，接下來我們?cè)跒g覽器試一下。為什么要在wamp的www文件中存儲(chǔ)呢，是因?yàn)樗拇蜷_方式有些不同。
首先我們打開瀏覽器在網(wǎng)址中輸入localhost來打開頁面，成功之后如圖所示：

Paste_Image.png

接下來我們可以點(diǎn)擊我們需要的文件了（在Your Projects里）。
我們首先用如下代碼來試：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            document.cookie=123;
        }
    </script>
</head>
<body>
    
</body>
</html>

然后我們打開相應(yīng)的頁面，F(xiàn)12，打開瀏覽器控制臺(tái)，找到Application，打開cookie


Paste_Image.png

如圖所示，我們看到了一條沒有名字的cookie是不是很有意思，接下來我們給他填一個(gè)名字，如上邊的代碼稍作改動(dòng)，以同樣的方式打開。

Paste_Image.png

是不是有了名字，很簡單吧。
對(duì)于cookie還有路徑path的問題：內(nèi)層文件的cookie外層文件取不到，內(nèi)層文件可以取到外層文件。在一般工作中一套代碼，一套cookie存在一層目錄級(jí)中，所以一般情況下存在根目錄下 /下。這些在后邊的代碼有所體現(xiàn)，請(qǐng)小伙伴們注意。
接下來我們說一下cookie的特點(diǎn)以便后續(xù)的說明。
cookie的特點(diǎn)：
1、cookie必須放在服務(wù)器環(huán)境中
2、存入和取出都是字符串
3、cookie是有過期時(shí)間的（有周期：expires）默認(rèn)瀏覽器關(guān)閉就消失
4、cookie是不安全的 F12可以查看刪除
5、cookie比較珍貴
下面詳細(xì)解釋：第一條上邊以講過不在贅述。
第二條我們說cookie的存入和取出都是字符串，意思是名字與value等值都在一起形成一個(gè)大字符串我們后邊的代碼會(huì)表現(xiàn)出來以及處理的方法。
第三條：cookie都有一個(gè)過期時(shí)間，以英文單詞expires表示，一般默認(rèn)為session（臨時(shí)會(huì)話）即打開窗口顯示cookie關(guān)閉窗口消失，大家可以創(chuàng)建兩個(gè)不同的cookie來試一下。不過這個(gè)過期值我們說是可以設(shè)定的大家平時(shí)上一些網(wǎng)站都會(huì)有自己的帳號(hào)與密碼，有時(shí)瀏覽器會(huì)詢問你是否存起來，存起來的話短期內(nèi)登錄是無需再次輸入的就是這個(gè)道理。后邊的代碼會(huì)有表現(xiàn)。
第四條我們打開F12并通過Application的方式打開發(fā)現(xiàn)可以delete刪除，并且可以看到一些數(shù)據(jù)就算是加密也是不安全的。所以說小伙伴們要在安全的地方才能登錄哦。
第五條由于一些歷史原因cookie很小，每個(gè)瀏覽器對(duì)cookie都有一定的限制，在使用時(shí)需要格外注意。 總大小一定要小于20條，小于4k。
接下來我們上一段演示代碼：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
        var oDate=new Date();
        oDate.setDate(oDate.getDate()+3);
        document.cookie='abc=123; expires='+oDate;
        alert(document.cookie);    
    </script>
</head>
<body>

</body>
</html>
Paste_Image.png
Paste_Image.png

以上代碼結(jié)合cookie的特點(diǎn)我們可以看出給cookie設(shè)置了過期時(shí)間設(shè)置的過期時(shí)間為三天以后，并且大家注意到?jīng)]有cookie在代碼中是一個(gè)大字串，我們后邊獲取相應(yīng)的值也需要轉(zhuǎn)換的方法。
我們不可能總是輸入長串代碼來設(shè)置cookie的相應(yīng)值，所以我們要對(duì)設(shè)置cookie值進(jìn)行封裝
代碼示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
         function setCookie(sName,sValue,iDay){
            if(iDay){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+iDay);

                document.cookie=sName+'='+sValue+'; path=/; expires='+oDate;
            }else{
                document.cookie=sName+'='+sValue+'; path=/';
            }
        }
        setCookie('aaa','111',3);
        setCookie('bbb','222',4);
        setCookie('ccc','333',5);
    </script>
</head>
<body>

</body>
</html>

進(jìn)行上述封裝后我們就可以任意設(shè)置我們需要的cookie值了。sName代表的是cookie的名字，svalue代表value值，過期時(shí)間可以設(shè)置也可以不設(shè)置相應(yīng)的if條件上述代碼也已經(jīng)給出，小伙伴們可以自己敲一下感受一哈加深印象。

Paste_Image.png

大家看一下我們?cè)O(shè)置了三條cookie，都已經(jīng)顯示在上面時(shí)間也和我們跳的一樣。
接下來我們講一下如何獲取cookie值，當(dāng)然也進(jìn)行封裝。我們?cè)谏鲜龅脑O(shè)置cookie封裝的情況下獲取cookie值以便大家有一個(gè)更直觀的認(rèn)識(shí)。插播一下我們將上述代碼alert（document.cookie）一下彈出的是

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4795694-48754363eddb93a7.png?
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
為一個(gè)字符串，下面進(jìn)行獲取cookie值的封裝
代碼示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
         function setCookie(sName,sValue,iDay){
            if(iDay){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+iDay);

                document.cookie=sName+'='+sValue+'; path=/; expires='+oDate;
            }else{
                document.cookie=sName+'='+sValue+'; path=/';
            }
        }
        setCookie('aaa','111',3);
        setCookie('bbb','222');
        setCookie('ccc','333',5);
        alert(document.cookie)       
         function getCookie(sName){
            var str=document.cookie;
            var arr=str.split('; ');
            for(var i=0;i<arr.length;i++){
                var arr2=arr[i].split('=');
                if(arr2[0]==sName){
                    return arr2[1]
                }
            }
            return ''
        }
        getCookie('aaa');
        alert(getCookie('aaa'))
    </script>
</head>
<body>

</body>
</html>

我們?yōu)榱双@取相應(yīng)的cookie值傳入了對(duì)應(yīng)的name值，將字符串進(jìn)行轉(zhuǎn)換轉(zhuǎn)換為數(shù)組形式的數(shù)據(jù)return出來，我們就可以獲取相應(yīng)的值。

Paste_Image.png

小伙伴們可以自己試一下捋清邏輯加深印象。
當(dāng)然有獲取就有刪除，我們加入刪除cookie代碼
代碼示例：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>
    <script>
        function setCookie(sName, sValue, iDay) {
            if (iDay) {
                var oDate = new Date();
                oDate.setDate(oDate.getDate() + iDay);

                document.cookie = sName + '=' + sValue + '; path=/; expires=' + oDate;
            } else {
                document.cookie = sName + '=' + sValue + '; path=/';
            }
        }
        setCookie('aaa', '111', 3);
        setCookie('bbb', '222');
        setCookie('ccc', '333', 5);

        function getCookie(sName) {
            var str = document.cookie;
            var arr = str.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (arr2[0] == sName) {
                    return arr2[1]
                }
            }
            return ''
        }
        getCookie('aaa');
        function removeCookie(sName) {
            setCookie(sName, 'aa', -1);
        }
        removeCookie('aaa');
        alert(getCookie('aaa'));
    </script>
</head>

<body>
</body>

</html>
Paste_Image.png
Paste_Image.png

如上圖所示aaa已經(jīng)被刪掉了，現(xiàn)在看起來是不是感覺簡單了好多，以后利用cookie值的時(shí)候直接調(diào)用封裝就可以了。
下面貼一個(gè)有關(guān)cookie的實(shí)例，選項(xiàng)卡的cookie值，在選擇一個(gè)下標(biāo)后再次刷新頁面會(huì)發(fā)現(xiàn)還是在那個(gè)下標(biāo)下，下面貼出代碼，希望小伙伴們可以敲一下并熟悉。為了能理解清晰就不進(jìn)行相應(yīng)封裝了，有興趣的同學(xué)可以自己封裝一下。
代碼示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        input {
            width: 100px;
            height: 50px;
            float: left;
        }
        .clearfix:after{display: block;
        content: '';
        clear: both;}
        .clearfix{
            zoom: 1;
        }
        li {
            width: 300px;
            height: 300px;
            background: #6cf;
            display: none;
            font-size: 50px;
            text-align: center;
            line-height: 300px;
            position: absolute;
            top: 50px;
        }
        
        .on {
            display: block;
            background: #6cf;
        }
    </style>
    <script>
        function setCookie(sName, sValue, iDay) {
            if (iDay) {
                var oDate = new Date();
                oDate.setDate(oDate.getDate() + iDay);
                document.cookie = sName + '=' + sValue + '; path=/; expires=' + oDate;
            } else {
                document.cookie = sName + '=' + sValue + '; path=/';

            }
        }

        function getCookie(sName) {
            var str = document.cookie;
            var arr = str.split('; ');
            for (var i = 0; i < arr.length; i++) {
                var arr2 = arr[i].split('=');
                if (arr2[0] == sName) {
                    return arr2[1]
                }
            }
            return ''
        }
        window.onload = function () {
            var aInp = document.getElementsByTagName('input');
            var aLi = document.getElementsByTagName('li');
            var oN=getCookie('xuan');            
           if(oN){
                for(var i=0;i<aInp.length;i++){
                     aInp[i].className='';
                     aLi[i].className='';
                }
                aInp[oN].className='on';
                aLi[oN].className='on';
            }
            for (var i = 0; i < aInp.length; i++) {
                aInp[i].index = i;
                aInp[i].onclick = function () {
                    for (var i = 0; i < aInp.length; i++) {
                        aInp[i].className = '';
                        aLi[i].className = '';
                    }
                    setCookie('xuan',this.index,7);
                    this.className = 'on';
                    aLi[this.index].className = 'on';
                }
            }
        }
    </script>
</head>

<body>
    <input type="button" name="" value="一">
    <input type="button" name="" value="二">
    <input type="button" name="" value="三">
    <ul>
        <li class="on">一</li>
        <li>二</li>
        <li>三</li>
    </ul>
</body>

</html>

上述說了這么多相比大家也覺得cookie有著很多缺點(diǎn)
cookie的缺點(diǎn)：
1、容量小
2、每次向服務(wù)器請(qǐng)求的時(shí)候，都會(huì)向服務(wù)器發(fā)送cookie（請(qǐng)求的次數(shù)越小越好）
3、會(huì)過期
4、寫起來不方便要封裝函數(shù)
現(xiàn)在ES6都有了新的方法來代替cookie值，不過并不兼容低級(jí)瀏覽器。新的方法如下：
local Storage 本地存儲(chǔ)
1、使用比較方便，不用封裝函數(shù)
2、有5M
3、不會(huì)向服務(wù)器發(fā)送請(qǐng)求
4、沒有過期
session Storage 臨時(shí)存儲(chǔ)
1、使用比較方便，不用封裝函數(shù)
2、有5M
3、不會(huì)向服務(wù)器發(fā)送請(qǐng)求
二者具體的使用方法如下：

local Storage

使用（簡寫）：
存：localStorage.name=value
?。簂ocalStorage.name
刪除： delete localStorage.name
全部刪除 循環(huán)delete
使用（全寫）：
存：localStorage.setItem(name.value);
?。簂ocalStorage.getItem(name);
刪除：localStorage.removeItem(name);
全部刪除 localStorage.clear();

session Storage

使用（簡寫）：
存：sessionStorage.name=value
取：sessionStorage.name
刪除： delete sessionStorage.name
全部刪除 循環(huán)delete
使用（全寫）：
存：sessionStorage.setItem(name.value);
?。簊essionStorage.getItem(name);
刪除：sessionStorage.removeItem(name);
全部刪除 sessionStorage.clear();
二者區(qū)別：大家想必從單詞的字面意思也可以看出一個(gè)沒有過期時(shí)間，一個(gè)關(guān)閉瀏覽器就過期。雖然以上兩者有這巨大的優(yōu)勢(shì)但是考慮到低級(jí)瀏覽器cookie的使用也是必不可少的。
??以上就是本次的全部內(nèi)容希望小伙伴們喜歡并提供意見相互交流在此謝謝大家了。同是也希望老司機(jī)帶我上車帶我飛?。ㄊ謩?dòng)滑稽）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容