>[success] # 前端存儲 -- Cookie、LocalStorage、IndexedDB、sessionStorage ~~~ 1.'Cookie' 存儲大小 4kb 2.'LocalStorage' 存儲大小2.5m ~ 10mb 3.'IndexedDB' 存儲大小可用磁盤空間的50％，關于'IndexedDB'特性 3.1.瀏覽器提供的本地數據庫，支持事務、索引 3.2.鍵值對儲存 3.3.異步 3.4.同源限制 3.5.儲存空間大 3.6.支持二進制儲存 ~~~ >[danger] ##### 常用 1. **localStorage**：本地存儲，提供的是一種永久性的存儲方法，在關閉掉網頁重新打開時，存儲的內容依然保留； 2. **sessionStorage**：會話存儲，提供的是本次會話的存儲，在關閉掉會話時，存儲的內容會被清除； * 區別 1. 關閉網頁后重新打開，localStorage會保留，而sessionStorage會被刪除 2. 在頁面內實現跳轉，localStorage會保留，sessionStorage也會保留 3. 打開新的頁面, 并且是在新的標簽中打開，localStorage會保留，sessionStorage不會被保留 * **方法和屬性** `屬性`： **Storage.length**：只讀屬性返回一個整數，表示存儲在Storage對象中的數據項數量； `方法`： **Storage.key(index)**：該方法接受一個數值n作為參數，返回存儲中的第n個key名稱； **Storage.getItem()**：該方法接受一個key作為參數，并且返回key對應的value； **Storage.setItem()**：該方法接受一個key和value，并且將會把key和value添加到存儲中。如果key存儲，則更新其對應的值； **Storage.removeItem()**：該方法接受一個key作為參數，并把該key從存儲中刪除； **Storage.clear()**：該方法的作用是清空存儲中的所有key； * 同一調用類 ~~~ class Cache { constructor(isLocal = true) { this.storage = isLocal ? localStorage: sessionStorage } setCache(key, value) { if (!value) { throw new Error("value error: value必須有值!") } if (value) { this.storage.setItem(key, JSON.stringify(value)) } } getCache(key) { const result = this.storage.getItem(key) if (result) { return JSON.parse(result) } } removeCache(key) { this.storage.removeItem(key) } clear() { this.storage.clear() } } const localCache = new Cache() const sessionCache = new Cache(false) ~~~