好家伙，本篇為《JS高級程式設計》第二五章“瀏覽器存儲”學習筆記 我們先來講個故事 一個“薅羊毛”的故事 (qq.com) 概括一下，就是 有個人通過網路平臺非法購買了大量“cookie”數據。 突破平臺封控，冒用他人新用戶身份，非法騙取新用戶優惠券。 拿著優惠券低價購入商品，隨後轉賣並從中賺取差價 ...
好家伙，本篇為《JS高級程式設計》第二五章“瀏覽器存儲”學習筆記
我們先來講個故事
概括一下，就是
有個人通過網路平臺非法購買了大量“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);
存儲在 localStorage 中的數據會保留到通過 JavaScript 刪除或者用戶 清除瀏覽器緩存。
localStorage 數據不受頁面刷新影響，也不會因關閉視窗、標簽頁或重新啟動瀏覽 器而丟失
3.IndexedDB
嗯，這玩意就是瀏覽器中的資料庫
IndexedDB 背後的思想是創造一套 API，方便 JavaScript 對象的 存儲和獲取，同時也支持查詢和搜索
前端本地存儲資料庫IndexedDB完整教程 - 掘金 (juejin.cn)
4.題目
1.說出cookie、localStorage和sessionStorage三者的不同點和相同點
圖片來自淺談瀏覽器存儲（cookie、localStorage、sessionStorage） - 喵小Q - 博客園 (cnblogs.com)
