一：cookie

1.什么是cookie

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

cookie是客戶端與服務器端進行會話使用的一個能夠在瀏覽器本地化存儲的技術。

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

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

        每一個 HTTP 響應都會在響應頭中攜帶 cookie 到客戶端

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

我們只是需要設置一下 cookie 的內容就可以。

COOKIE 的存儲形式

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

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

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

2.cookie的特點

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

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

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

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

3.cookie的作用

1.識別客戶端

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

2.保存數(shù)據

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

4.cookie的使用場景

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

個性化設置（保存用戶設置的樣式等）

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

5.cookie的使用方式

1.設置cookie：document.cookie = "key=value;";   

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

 進一步封裝：

//保存cookie（新建和修改）
// 參數(shù)：
//  鍵
//  值
//  時長（保質期）
//  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獲取指定鍵的值；（根據鍵獲取值）；
    // 參數(shù)：鍵
    // 返回值： 鍵對應的值；
    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的值和有效時間來達到刪除的目的：

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

6.查看cookie

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

7.cookie的缺點         

cookie可能被禁用

cookie與瀏覽器相關，不能互相訪問

cookie可能被用戶刪除

cookie安全性不夠高

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

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

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

二：webStorage 

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

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

window.localStorage和window.sessionStorage。

1.localStorage

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

用法：

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

2.sessionStorage

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

用法：

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

3.查看

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

三：cookie、localStorage、sessionStorage的異同

1.共同點：

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

2.區(qū)別

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

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

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

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

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

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

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

localStorage 的優(yōu)勢

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

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

localStorage 的局限

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

(2)目前所有的瀏覽器中都會把 localStorage 的值類型限定為 string 類型，這個在對我們日常比較常見的 JSON 對象類型需要一些轉換

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

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

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

總結

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

最新評論