一：cookie

1.什么是cookie

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

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

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

        每一個 HTTP 請求都會在請求頭中攜帶 cookie 到服務(wù)端

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

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

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

COOKIE 的存儲形式

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

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

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

2.cookie的特點

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

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

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

4. 有域名限制，在哪個域名下存儲的cookie，只能在哪個域名下訪問

3.cookie的作用

1.識別客戶端

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

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

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

4.cookie的使用場景

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

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

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

5.cookie的使用方式

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

// 保存數(shù)據(jù)的格式：
//  document.cookie="鍵=值;expires=日期的GMT格式的字符串"
function saveData(){
    // 在cookie里保存數(shù)據(jù)
    // 1、如果不寫失效時間，那么，數(shù)據(jù)是臨時保存（會話級別）。當(dāng)瀏覽器關(guān)閉就會消失。
    // document.cookie = "username=安琪拉";
    // 2、如果寫上失效時間點，那么，數(shù)據(jù)將會在該時間點后，被刪除。
    // 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ù)：
//  鍵
//  值
//  時長（保質(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ù)：鍵
    // 返回值： 鍵對應(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ù)組(查找以username=開頭的元素)
            str = arr.filter(item => item.startsWith(key + "="))[0];    //"username=安琪拉"
            return str==undefined  ?  undefined : str.split("=")[1];
    }

3.刪除cookie：

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

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

6.查看cookie

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

7.cookie的缺點         

cookie可能被禁用

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

cookie可能被用戶刪除

cookie安全性不夠高

cookie會隨著HTTP請求發(fā)送給服務(wù)器

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

cookie操作麻煩，沒有方便的API

二：webStorage 

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

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

window.localStorage和window.sessionStorage。

1.localStorage

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

用法：

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

2.sessionStorage

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

用法：

      // 設(shè)置sessionStorage保存到本地，第一個為變量名，第二個是值
      sessionStorage.setItem('sessionName', '可樂')
      // 獲取數(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.共同點：

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

2.區(qū)別

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

 2、存儲大小限制也不同，cookie數(shù)據(jù)不能超過4K，同時因為每次http請求都會攜帶cookie、所以cookie只適合保存很小的數(shù)據(jù)，如會話標(biāo)識。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大 。

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

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

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

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

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

localStorage 的優(yōu)勢

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

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

localStorage 的局限

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

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

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

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

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

總結(jié)

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

最新評論