如何選擇季二？
客戶端存儲無非就是 Cookie、SessionStorage舀寓、LocalStorage、IndexedDB肌蜻、WebSQL 這些互墓，從一定程度上來說怎么存儲都是可以的，只是你覺得怎么方便蒋搜，就怎么存儲
Cookie
HTTP Cookie（也叫 Web Cookie 或瀏覽器 Cookie）是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù)篡撵，它會在瀏覽器下次向同一服務(wù)器再發(fā)起請求時被攜帶并發(fā)送到服務(wù)器上。通常豆挽，它用于告知服務(wù)端兩個請求是否來自同一瀏覽器育谬，如保持用戶的登錄狀態(tài)。
Cookie 主要用于以下三個方面：
- 會話狀態(tài)管理（如用戶登錄狀態(tài)帮哈、購物車膛檀、游戲分?jǐn)?shù)或其它需要記錄的信息）；
- 個性化設(shè)置（如用戶自定義設(shè)置娘侍、主題等）咖刃；
- 瀏覽器行為跟蹤（如跟蹤分析用戶行為等）。
Cookie 的特點：
- Cookie 的大小受限憾筏，一般為 4 KB嚎杨；
- 同一個域名下存放 Cookie 的個數(shù)是有限制的，不同瀏覽器的個數(shù)不一樣氧腰，一般為 20 個枫浙；
- Cookie 支持設(shè)置過期時間，當(dāng)過期時自動銷毀容贝；
- 每次發(fā)起同域下的 HTTP 請求時自脯，都會攜帶當(dāng)前域名下的 Cookie；
- 支持設(shè)置為 HttpOnly斤富，防止 Cookie 被客戶端的 JavaScript 訪問膏潮。
// 簡單用法
document.cookie = "name=semlinker";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// 顯示: name=semlinker;favorite_food=tripe
localStorage
一種持久化的存儲方式，也就是說如果不手動清除满力，數(shù)據(jù)就永遠(yuǎn)不會過期焕参。它是采用鍵值對的方式存儲數(shù)據(jù)轻纪，按域名將數(shù)據(jù)分別保存到對應(yīng)數(shù)據(jù)庫文件里。相比 Cookie 來說叠纷，它能保存更大的數(shù)據(jù)刻帚。
localStorage 的特點：
- 大小限制為 5MB ~10MB；
- 在同源的所有標(biāo)簽頁和窗口之間共享數(shù)據(jù)涩嚣；
- 數(shù)據(jù)僅保存在客戶端崇众，不與服務(wù)器進(jìn)行通信；
- 數(shù)據(jù)持久存在且不會過期航厚，重啟瀏覽器后仍然存在顷歌；對數(shù)據(jù)的操作是同步的。
// 通過setItem()增加一個數(shù)據(jù)項
localStorage.setItem('myName', 'Semlinker');
// 通過getItem()獲取某個數(shù)據(jù)項
let me = localStorage.getItem('myName');
// 通過removeItem()移除某個數(shù)據(jù)項
localStorage.removeItem('myName');
// 移除所有數(shù)據(jù)項
localStorage.clear();
sessionStorage
與服務(wù)端的 session 類似幔睬，sessionStorage 是一種會話級別的緩存眯漩，關(guān)閉瀏覽器時數(shù)據(jù)會被清除。需要注意的是 sessionStorage 的作用域是窗口級別的麻顶，也就是說不同窗口之間保存的 sessionStorage 數(shù)據(jù)是不能共享的赦抖。
sessionStorage 的特點：
- sessionStorage 的數(shù)據(jù)只存在于當(dāng)前瀏覽器的標(biāo)簽頁；
- 數(shù)據(jù)在頁面刷新后依然存在辅肾，但在關(guān)閉瀏覽器標(biāo)簽頁之后數(shù)據(jù)就會被清除队萤；
- 與 localStorage 擁有統(tǒng)一的 API 接口；
- 對數(shù)據(jù)的操作是同步的宛瞄。
// 通過setItem()增加一個數(shù)據(jù)項
sessionStorage.setItem('myName', 'Semlinker');
// 通過getItem()獲取某個數(shù)據(jù)項
let me = sessionStorage.getItem('myName');
// 通過removeItem()移除某個數(shù)據(jù)項
sessionStorage.removeItem('myName');
// 移除所有數(shù)據(jù)項
sessionStorage.clear();
IndexedDB
IndexedDB 是一種底層 API浮禾，用于客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)，包括文件份汗、二進(jìn)制大型對象盈电。該 API 使用索引來實現(xiàn)對該數(shù)據(jù)的高性能搜索。雖然 Web Storage 對于存儲較少量的數(shù)據(jù)很有用杯活，但對于存儲更大量的結(jié)構(gòu)化數(shù)據(jù)來說匆帚，這種方法不太好用。IndexedDB 提供了一個解決方案旁钧。
IndexedDB 的特點：
- 存儲空間大：存儲空間可以達(dá)到幾百兆甚至更多吸重；
- 支持二進(jìn)制存儲：它不僅可以存儲字符串，而且還可以存儲二進(jìn)制數(shù)據(jù)歪今；
- IndexedDB 有同源限制嚎幸，每一個數(shù)據(jù)庫只能在自身域名下能訪問，不能跨域名訪問寄猩；
- 支持事務(wù)型：IndexedDB 執(zhí)行的操作會按照事務(wù)來分組的嫉晶，在一個事務(wù)中，要么所有的操作都成功，要么所有的操作都失斕娣稀箍铭；
- 鍵值對存儲：IndexedDB 內(nèi)部采用對象倉庫（object store）存放數(shù)據(jù)。所有類型的數(shù)據(jù)都可以直接存入椎镣，包括 JavaScript 對象诈火。對象倉庫中，數(shù)據(jù)以 “鍵值對” 的形式保存状答，每一個數(shù)據(jù)記錄都有對應(yīng)的主鍵冷守，主鍵是獨一無二的，不能有重復(fù)剪况，否則會拋出一個錯誤教沾；
- 數(shù)據(jù)操作是異步的：使用 IndexedDB 執(zhí)行的操作是異步執(zhí)行的，以免阻塞應(yīng)用程序译断。
// 示例
var dbName = "my_db";
var request = indexedDB.open(dbName, 2);
request.onerror = function(event) {
// 錯誤處理
};
request.onupgradeneeded = function(event) {
var db = event.target.result;
// 建立一個對象倉庫來存儲我們客戶的相關(guān)信息，我們選擇 ssn 作為鍵路徑（key path）
// 因為 ssn 可以保證是不重復(fù)的
var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
// 建立一個索引來通過姓名來搜索客戶或悲。名字可能會重復(fù)孙咪，所以我們不能使用 unique 索引
objectStore.createIndex("name", "name", { unique: false });
// 使用郵箱建立索引，我們確毖灿铮客戶的郵箱不會重復(fù)翎蹈，所以我們使用 unique 索引
objectStore.createIndex("email", "email", { unique: true });
// 使用事務(wù)的 oncomplete 事件確保在插入數(shù)據(jù)前對象倉庫已經(jīng)創(chuàng)建完畢
objectStore.transaction.oncomplete = function(event) {
// 將數(shù)據(jù)保存到新創(chuàng)建的對象倉庫
var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
customerData.forEach(function(customer) {
customerObjectStore.add(customer);
});
};
};
Web SQL
Web SQL 數(shù)據(jù)庫 API 實際上不是 HTML5 規(guī)范的一部分，而是一個單獨的規(guī)范男公，它引入了一組 API 來使用 SQL 來操作客戶端數(shù)據(jù)庫荤堪。需要注意的是，HTML5 已經(jīng)放棄 Web SQL 數(shù)據(jù)庫枢赔。
Web SQL Database 規(guī)范中定義的三個核心方法：
- openDatabase：這個方法使用現(xiàn)有數(shù)據(jù)庫或新建數(shù)據(jù)庫來創(chuàng)建數(shù)據(jù)庫對象澄阳；
- transaction：這個方法允許我們根據(jù)情況控制事務(wù)的提交或回滾；
- executeSql：這個方法用于執(zhí)行真實的 SQL 語句踏拜。
Web SQL 的特點（相比 Cookie碎赢、localStorage 與 sessionStorage）：
- Web SQL 能方便進(jìn)行對象存儲；
- Web SQL 支持事務(wù)速梗，能方便地進(jìn)行數(shù)據(jù)查詢和數(shù)據(jù)處理操作肮塞。
// 示例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
// 執(zhí)行查詢操作
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
// 執(zhí)行插入操作
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
});
