好家伙，本篇為《JS高級程式設計》第二五章“瀏覽器存盤”學習筆記

我們先來講個故事

一個“薅羊毛”的故事 (qq.com)

概括一下，就是

有個人通過網路平臺非法購買了大量“cookie”資料，

突破平臺封控，冒用他人新用戶身份，非法騙取新用戶優惠券，

拿著優惠券低價購入商品，隨后轉賣并從中賺取差價，

再將使用過的“cookie”資料再次低價轉賣或轉贈他人，從中獲利，（太狠了）

隨后我們回到正題

我們進入一個需要登陸的網站，我們注冊登錄

隨后，我們希望每次進入的時候，都不再需要手動輸入資訊登錄，

我們希望瀏覽器中保存著我們的資訊

于是，直接在客戶端存盤用戶資訊的需求出現了

常見存盤方式主要有兩種：cookie、webStorage（localStorage和sessionStorage）

1.cookie

HTTP cookie 通常也叫作 cookie，最初用于在客戶端存盤會話資訊，

這個規范要求服務器在回應 HTTP 請求時，通過發送 Set-Cookie HTTP 頭部包含會話資訊，

1.1.cookie 的限制

cookie 是與特定域系結的，設定 cookie 后，它會與請求一起發送到創建它的域，

這個限制能保證 cookie 中存盤的資訊只對被認可的接收者開放，不被其他域訪問，

? 不超過 300 個 cookie；

? 每個 cookie 不超過 4096 位元組；

? 每個域不超過 20 個 cookie；

? 每個域不超過 81 920 位元組，

1.2.cookie的組成

cookie 的限制（來看看他長什么樣子）

? 名稱：唯一標識 cookie 的名稱，cookie 名不區分大小寫

? 值：存盤在 cookie 里的字串值，這個值必須經過 URL 編碼，

? 域：cookie 有效的域，發送到這個域的所有請求都會包含對應的 cookie，

? 路徑：請求 URL 中包含這個路徑才會把 cookie 發送到服務器，

? 過期時間：表示何時洗掉 cookie 的時間戳（

? 安全標志：設定之后，只在使用 SSL 安全連接的情況下才會把 cookie 發送到服務器，

1.3.使用

所有名和值都是 URL 編碼的，因此必須使用 decodeURIComponent()解碼，

class CookieUtil {
    static get(name) {
        let cookieName = `${encodeURIComponent(name)}=`,
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1) {
            let cookieEnd = document.cookie.indexOf(";", cookieStart);
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart +
                cookieName.length, cookieEnd));
        }
        return cookieValue;
    }
    static set(name, value, expires, path, domain, secure) {
        let 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;
    }
    static unset(name, path, domain, secure) {
        CookieUtil.set(name, "", new Date(0), path, domain, secure);
    }
};

// 設定 cookie 
CookieUtil.set("name", "panghu"); 
// 讀取 cookie 
alert(CookieUtil.get("panghu")); // "panghu"

(然而我這并沒有出現正確結果)

2.Web Storage

Web Storage 的目的是解決通過客戶端存盤不需要頻繁發送回服務器的數據時使用 cookie 的問題，

分為localStorage 和 sessionStorage

2.1.sessionStorage物件

sessionStorage 物件只存盤會話資料，這意味著資料只會存盤到瀏覽器關閉，

存盤在 sessionStorage 中的資料不受頁面重繪影響，可以在瀏覽器崩潰并重啟后恢復，

基本用法(增刪查改)

// 使用方法存盤資料
sessionStorage.setItem("name", "胖虎"); 
// 使用屬性存盤資料
sessionStorage.book = "好書"; 

// 使用方法取得資料
let name = sessionStorage.getItem("name"); 
// 使用屬性取得資料
let book = sessionStorage.book; 

console.log(name+book)
// 使用 delete 洗掉值
delete sessionStorage.name; 
// 使用方法洗掉值
sessionStorage.removeItem("book"); 

console.log(sessionStorage);

2.2.localStorage 物件

要訪問同一個 localStorage 物件，頁面必須來自同一個域（子域不可以）、在相同的端口上使用相同的協議，

localStorage和sessionStorage的Api用法差不太多

// 使用方法存盤資料
localStorage.setItem("name", "余華"); 
// 使用屬性存盤資料
localStorage.book = "活著"; 
// 使用方法取得資料
let name = localStorage.getItem("name"); 
// 使用屬性取得資料
let book = localStorage.book; 

console.log(name+book)

// 使用 delete 洗掉值
delete localStorage.name; 
// 使用方法洗掉值
localStorage.removeItem("book"); 

console.log(localStorage);