最近想自己造一個(gè)類似記事本的小輪子。因?yàn)楦杏X沒必要用上復(fù)雜的后端（同時(shí)自己也懶），就打算把數(shù)據(jù)都交給前端來存儲(chǔ)。說到前端存儲(chǔ)，最先想到的肯定是localStorage系列（還有sessionStorage），只是localStorage只有讀取功能，顯然是無法滿足我的需求的。
于是打算上網(wǎng)搜索一下相關(guān)的技術(shù)，期望可以找一個(gè)類似于SQLLite的工具。在搜索的過程中，正好發(fā)現(xiàn)了這本書《客戶端存儲(chǔ)技術(shù)》。雖然是只有100頁左右的小薄本，但對(duì)于想要了解一下客戶端存儲(chǔ)相關(guān)技術(shù)的我來說正好合適。于是便抽空讀了一遍，做了一個(gè)簡(jiǎn)單的讀書筆記。
客戶端存儲(chǔ)技術(shù).png
圖片看不清的朋友可以直接看我的腦圖：客戶端存儲(chǔ)技術(shù)
書中主要介紹了目前常用的客戶端存儲(chǔ)技術(shù)以及各個(gè)存儲(chǔ)技術(shù)的優(yōu)缺點(diǎn)和適用范圍。
當(dāng)然，客戶端存儲(chǔ)最主要的目的是減輕服務(wù)端的壓力，而不是去代替服務(wù)端存儲(chǔ)（畢竟性能和安全性上是是做不到的）。如果是作為小的離線應(yīng)用的話，倒是不妨可以用一下。
目前客戶端存儲(chǔ)技術(shù)可以簡(jiǎn)單用下表來總結(jié)
| 編號(hào) | 技術(shù) | 說明 | 類庫 |
|---|---|---|---|
| 1 | Cookie | 最“古老”的存儲(chǔ)方式。通過document.cookie就能進(jìn)行設(shè)置與訪問。一般如網(wǎng)站記住登錄狀態(tài)會(huì)利用Cookie（會(huì)設(shè)置過期時(shí)間），敏感信息不建議存儲(chǔ)在Cookie中。安全系數(shù)比較低。 | MDN上有相關(guān)的類庫，可以簡(jiǎn)化Cookie的操作。 |
| 2 | LocalStorage/SessionStorage | 比較常見的客戶端存儲(chǔ)。有大小限制5MB。一個(gè)域名對(duì)應(yīng)一個(gè)Storage，可以持久化的存放一些數(shù)據(jù)，同樣不建議存放敏感信息。 | Lockr |
| 3 | IndexedDB | 無大小限制（理論上）。以對(duì)象的形式存放數(shù)據(jù)（很像MongoDB）。原生API很相對(duì)比較復(fù)雜，特別是查詢部分。使用庫可以簡(jiǎn)化操作。目前對(duì)移動(dòng)端的支持還不是很好（特別是Safari），PC端支持很好。 | Dexie、PouchDB |
| 4 | WebSQL | 比IndexedDB出現(xiàn)時(shí)間要早。使用前需要設(shè)置數(shù)據(jù)庫大小。具體操作與SQL相同，熟悉SQL就能很快上手。已被廢棄的規(guī)定。移動(dòng)端支持不錯(cuò)。 | - |
