一：cookie

1.什么是cookie

cookie是瀏覽器提供的一種機(jī)制，可以由JavaScript對(duì)其進(jìn)行操作（設(shè)置、讀取、刪除）。

cookie是客戶端與服務(wù)器端進(jìn)行會(huì)話使用的一個(gè)能夠在瀏覽器本地化存儲(chǔ)的技術(shù)。

會(huì)話跟蹤技術(shù)：瀏覽器和服務(wù)器在進(jìn)行多次請(qǐng)求間共享數(shù)據(jù)的過(guò)程，稱為會(huì)話跟蹤技術(shù)。

        每一個(gè) HTTP 請(qǐng)求都會(huì)在請(qǐng)求頭中攜帶 cookie 到服務(wù)端

        每一個(gè) HTTP 響應(yīng)都會(huì)在響應(yīng)頭中攜帶 cookie 到客戶端

     也就是說(shuō)，cookie 是不需要我們手動(dòng)設(shè)置，就會(huì)自動(dòng)在 客戶端 和 服務(wù)端之間游走的數(shù)據(jù)

我們只是需要設(shè)置一下 cookie 的內(nèi)容就可以。

COOKIE 的存儲(chǔ)形式

cookie 是以字符串的形式存儲(chǔ)，在字符串中以 key=value 的形式出現(xiàn)

每一個(gè) key=value 是一條數(shù)據(jù)

多個(gè)數(shù)據(jù)之間以 ; 分割

2.cookie的特點(diǎn)

1. 存儲(chǔ)大小有限制，一般是 4 KB 左右

2. 數(shù)量有限制，一般是 50 條左右

3. 有時(shí)效性，也就是有過(guò)期時(shí)間，未設(shè)置的話是 會(huì)話級(jí)別（也就是瀏覽器關(guān)閉就過(guò)期了）

4. 有域名限制，在哪個(gè)域名下存儲(chǔ)的cookie，只能在哪個(gè)域名下訪問(wèn)

3.cookie的作用

1.識(shí)別客戶端

http是無(wú)狀態(tài)協(xié)議。為了讓服務(wù)器然能夠識(shí)別客戶端，客戶端使用cookie，服務(wù)使用session。具體過(guò)程:當(dāng)瀏覽器首次發(fā)送請(qǐng)求時(shí)，服務(wù)端會(huì)產(chǎn)生一個(gè)唯一的編號(hào) (sessionld) 。響應(yīng)時(shí)，把編號(hào)(sessionld) 發(fā)給瀏覽器端，瀏覽器端把接收到sessionld保存在cookie里。下次請(qǐng)求時(shí)，把sessionld攜帶上。服務(wù)器根據(jù)攜帶的sessionld，就能區(qū)分不同的客戶端。（這個(gè)過(guò)程不需要我們寫任何代碼）

2.保存數(shù)據(jù)

• cookie可以在客戶端保存數(shù)據(jù)
• cookie會(huì)把數(shù)據(jù)存儲(chǔ)在瀏覽器端的硬盤上

4.cookie的使用場(chǎng)景

會(huì)話狀態(tài)管理（如用戶登錄狀態(tài)、購(gòu)物車等）

個(gè)性化設(shè)置（保存用戶設(shè)置的樣式等）

瀏覽器行為跟蹤（如跟蹤分析用戶行為等）

5.cookie的使用方式

1.設(shè)置cookie：document.cookie = "key=value;";   

// 保存數(shù)據(jù)的格式：
//  document.cookie="鍵=值;expires=日期的GMT格式的字符串"
function saveData(){
    // 在cookie里保存數(shù)據(jù)
    // 1、如果不寫失效時(shí)間，那么，數(shù)據(jù)是臨時(shí)保存（會(huì)話級(jí)別）。當(dāng)瀏覽器關(guān)閉就會(huì)消失。
    // document.cookie = "username=安琪拉";
    // 2、如果寫上失效時(shí)間點(diǎn)，那么，數(shù)據(jù)將會(huì)在該時(shí)間點(diǎn)后，被刪除。
    // document.cookie = "username=安琪拉;expires=日期的GMT字符串格式";
    let d= new Date();
    d.setDate(d.getDate()+7);//設(shè)置為7天有效期
    document.cookie = "username=安琪拉;expires="+d.toGMTString();
}

 進(jìn)一步封裝：

//保存cookie（新建和修改）
// 參數(shù)：
//  鍵
//  值
//  時(shí)長(zhǎng)（保質(zhì)期）
//  path
//  domain
function saveCookie(key,value,daycount,path,domain){
    let d = new Date();
    d.setDate(d.getDate()+daycount);
    let str = `${key}=${encodeURIComponent(value)};expires=${d.toGMTString()}`;
    path && (str+=`;path=${path}`);
    domain && (str+=`;domain=${domain}`);
    document.cookie=str;
}

2.獲取cookie：

    //從cookie獲取指定鍵的值；（根據(jù)鍵獲取值）；
    // 參數(shù)：鍵
    // 返回值： 鍵對(duì)應(yīng)的值；
    function getCookie(key) {
            let str = document.cookie;// a=20; username=安琪拉; userid=001
            // 1、分割成數(shù)組
            let arr = str.split("; ");//["a=20","username=安琪拉","userid=001"]
            // 2、遍歷數(shù)組(查找以u(píng)sername=開頭的元素)
            str = arr.filter(item => item.startsWith(key + "="))[0];    //"username=安琪拉"
            return str==undefined  ?  undefined : str.split("=")[1];
    }

3.刪除cookie：

cookie是到期自動(dòng)失效的，我們可以通過(guò)修改key的值和有效時(shí)間來(lái)達(dá)到刪除的目的：

 function removeCookie() {
        let d = new Date();
        d.setDate(d.getDate()-1);//設(shè)置失效時(shí)間為前一天
        document.cookie="username=byebye;expires="+d.toGMTString();
 }

6.查看cookie

在瀏覽器中按住鍵盤F12進(jìn)入開發(fā)者工具后，選擇Application（圖中紅色方框處），然后就能在左邊看到cookie。

7.cookie的缺點(diǎn)         

cookie可能被禁用

cookie與瀏覽器相關(guān)，不能互相訪問(wèn)

cookie可能被用戶刪除

cookie安全性不夠高

cookie會(huì)隨著HTTP請(qǐng)求發(fā)送給服務(wù)器

cookie存儲(chǔ)空間很小(只有4KB左右)

cookie操作麻煩，沒(méi)有方便的API

二：webStorage 

webstorage 是 HTML5新增的存儲(chǔ)數(shù)據(jù)的方案，比使用 cookie 更加直觀。它提供了訪問(wèn)特定域名下的會(huì)話存儲(chǔ)或本地存儲(chǔ)的功能，如果是會(huì)話存儲(chǔ)，則使用sessionStorage，如果是本地存儲(chǔ)(硬盤)，則使用localStorage。sessionStorage和localStorage的官方函數(shù)一樣。localStorage和sessionStorage都以鍵值對(duì)（key、value）的形式存儲(chǔ)。

注意: 這不是javaScript語(yǔ)言本身的特性，是BOM的東西。

window.localStorage和window.sessionStorage。

1.localStorage

localStorage的生命周期是永久，除非手動(dòng)去清除，否則永遠(yuǎn)都存在，他的儲(chǔ)存大小是5MB，僅在客戶端瀏覽器上儲(chǔ)存，不參與服務(wù)器的通信。

用法：

      //設(shè)置localStorage保存到本地，第一個(gè)為變量名，第二個(gè)是值
      localStorage.setItem('username', '安琪拉')
      // 獲取數(shù)據(jù)
      localStorage.getItem('username')
      // 刪除保存的數(shù)據(jù)
      localStorage.removeItem('username')
      // 清除所有保存的數(shù)據(jù)
      localStorage.clear()

2.sessionStorage

sessionStorage顧名思義，是在當(dāng)前會(huì)話下有效，引入了一個(gè)“瀏覽器窗口的概念”,sessionStorage是在同源的同窗口中，始終存在的數(shù)據(jù)，只要瀏覽器不關(guān)閉，即使是刷新或者進(jìn)入同源的另一個(gè)頁(yè)面，數(shù)據(jù)仍在。同時(shí)打開“獨(dú)立”的窗口，即使是同一個(gè)頁(yè)面，sessionStorage的對(duì)象也是不同的。關(guān)閉窗口后sessionStorage就會(huì)被銷毀。

用法：

      // 設(shè)置sessionStorage保存到本地，第一個(gè)為變量名，第二個(gè)是值
      sessionStorage.setItem('sessionName', '可樂(lè)')
      // 獲取數(shù)據(jù)
      sessionStorage.getItem('sessionName')
      // 刪除保存的數(shù)據(jù)
      sessionStorage.removeItem('sessionName')
      // 清除所有保存的數(shù)據(jù)
      sessionStorage.clear()

3.查看

在瀏覽器中按住鍵盤F12進(jìn)入開發(fā)者工具后，選擇Application（圖中紅色方框處），然后就能在左邊Storage列表中找到localStorage和sessionStorgae。

三：cookie、localStorage、sessionStorage的異同

1.共同點(diǎn)：

都是保存在瀏覽器端、且同源的 

2.區(qū)別

1、cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），即cookie在瀏覽器和服務(wù)器間來(lái)回傳遞，而sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念，可以限制cookie只屬于某個(gè)路徑下 。

 2、存儲(chǔ)大小限制也不同，cookie數(shù)據(jù)不能超過(guò)4K，同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)，如會(huì)話標(biāo)識(shí)。sessionStorage和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大得多，可以達(dá)到5M或更大 。

3、數(shù)據(jù)有效期不同，sessionStorage：僅在當(dāng)前瀏覽器窗口關(guān)閉之前有效；                         localStorage：始終有效，窗口或?yàn)g覽器關(guān)閉也一直保存，因此用作持久數(shù)據(jù)；cookie：只在設(shè)置的cookie過(guò)期時(shí)間之前有效，沒(méi)有設(shè)置的話瀏覽器關(guān)閉就會(huì)失效。

4、作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個(gè)頁(yè)面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的 。

5、web Storage支持事件通知機(jī)制，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者 。

6、web Storage的api接口使用更方便。

四：localStorage 的優(yōu)勢(shì)與局限

localStorage 的優(yōu)勢(shì)

(1)localStorage 拓展了 cookie 的 4K 限制

(2)localStorage 會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地，這個(gè)相當(dāng)于一個(gè) 5M 大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù)，相比于 cookie 可以節(jié)約帶寬，但是這個(gè)卻是只有在高版本的瀏覽器中才支持的

localStorage 的局限

(1)瀏覽器的大小不統(tǒng)一，并且在 IE8 以上的 IE 版本才支持 localStorage 這個(gè)屬性

(2)目前所有的瀏覽器中都會(huì)把 localStorage 的值類型限定為 string 類型，這個(gè)在對(duì)我們?nèi)粘１容^常見的 JSON 對(duì)象類型需要一些轉(zhuǎn)換

(3)localStorage 在瀏覽器的隱私模式下面是不可讀取的

(4)localStorage 本質(zhì)上是對(duì)字符串的讀取，如果存儲(chǔ)內(nèi)容多的話會(huì)消耗內(nèi)存空間，會(huì)導(dǎo)致頁(yè)面變卡

(5)localStorage 不能被爬蟲抓取到 localStorage 與 sessionStorage 的唯一一點(diǎn)區(qū)別就是 localStorage 屬于永久性存儲(chǔ)，而 sessionStorage 屬于當(dāng)會(huì)話結(jié)束的時(shí)候，sessionStorage 中的鍵值對(duì)會(huì)被清空。

總結(jié)

到此這篇關(guān)于JavaScript中cookie、localStorage和sessionStorage示例詳解的文章就介紹到這了,更多相關(guān)cookie、localStorage和sessionStorage詳解內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論