Cookie

• 最初是在客戶端用于存儲會(huì)話信息，該標(biāo)準(zhǔn)要求服務(wù)器對任意HTTP請求發(fā)送Set-Cookie HTTP頭作為響應(yīng)的部分，其中包括會(huì)話信息。例如

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: theme=light
Set-Cookie: sessionToken=abc123; Expires=Wed, 09 Jun 2021 10:18:14 GMT
...

• 瀏覽器會(huì)存儲這樣的會(huì)話信息，并在這之后通過為每個(gè)請求添加Cookie HTTP頭將信息發(fā)送給服務(wù)器

GET /spec.html HTTP/1.1
Host: www.example.org
Cookie: theme=light; sessionToken=abc123
...

• 發(fā)送回服務(wù)器的額外信息可以用于唯一驗(yàn)證客戶來自于發(fā)送哪個(gè)請求

Cookie限制

• cookie在性質(zhì)上是綁定在特定的域名下的，無法跨域
• 每個(gè)域的cookie總數(shù)是有限的
• cookie的尺寸是有限制的，最好限制在4095B以內(nèi)

Cookie構(gòu)成

• 名稱(name)：一個(gè)唯一確定的名稱，必須經(jīng)過URL編碼
• 值(value)：存儲在cookie中的字符串值，必須經(jīng)過URL編碼
• 域(domain)：cookie對哪個(gè)域是有效的，所有向該域發(fā)送的請求中都會(huì)包含這個(gè)cookie信息，這個(gè)值可以包含子域，也可以不包含。
• 路徑(path)：對于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送cookie?？梢杂脕碇话l(fā)送給子域。
• 失效時(shí)間(expries)：表示cookie何時(shí)應(yīng)該被刪除的時(shí)間戳，默認(rèn)時(shí)瀏覽器會(huì)話結(jié)束即刪除所有cookie，這個(gè)值是GMT格式的日期
• 安全標(biāo)志(secure)：指定后，cookie只有在使用SSL連接的時(shí)候才發(fā)送到服務(wù)器

JS中的Cookie

讀取寫入和刪除

var CookieUtil = {

    get: function (name){
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null,
            cookieEnd;
            
        if (cookieStart > -1){
            cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        } 

        return cookieValue;
    },
    
    set: function (name, value, expires, path, domain, secure) {
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    
        if (expires instanceof Date) {
            cookieText += "; expires=" + expires.toGMTString();
        }
    
        if (path) {
            cookieText += "; path=" + path;
        }
    
        if (domain) {
            cookieText += "; domain=" + domain;
        }
    
        if (secure) {
            cookieText += "; secure";
        }
    
        document.cookie = cookieText;
    },
    
    unset: function (name, path, domain, secure){
        this.set(name, "", new Date(0), path, domain, secure);
    }

};

Web storage

• 提供一種在cookie之外存儲會(huì)話數(shù)據(jù)的途徑
• 提供一種存儲啊大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制
• 比起cookie，這里存儲的數(shù)據(jù)是嚴(yán)格控制在客戶端，而無需持續(xù)將數(shù)據(jù)發(fā)送回服務(wù)器

Storage類型方法

• clear()：刪除所有值
• getItem(name)：根據(jù)指定的名字name獲取對應(yīng)的值
• key(index)：根據(jù)指定index位置處的值的名字
• removeItem(name)：刪除由name指定的名值對
• setItem(name, value)：為指定的name設(shè)置一個(gè)對應(yīng)的值

sessionStorage

• sessionStorage對象存儲特定某個(gè)對話的數(shù)據(jù)，可以跨越頁面刷新而存在

localStorage

• 要訪問同一個(gè)localStorage對象，頁面必須來自同一個(gè)域名，使用同一種協(xié)議在同一個(gè)端口上。
• 存儲在 localStorage 里面的數(shù)據(jù)沒有過期時(shí)間（expiration time），而存儲在 sessionStorage 里面的數(shù)據(jù)會(huì)在瀏覽器會(huì)話（browsing session）結(jié)束時(shí)被清除，即瀏覽器關(guān)閉時(shí)。

localStorage vs. sessionStorage vs. Cookies

• In terms of capabilities, cookies only allow you to store strings. sessionStorage and localStorage allow you to store JavaScript primitives but not Objects or Arrays (it is possible to JSON serialise them to store them using the APIs). Session storage will generally allow you to store any primitives or objects supported by your Server Side language/framework.

watch more