1.Cookie
cookie是比較老的前端快取技術了，它的特點是想要使用它前端必須要有服務（靜態網頁是不行的），而且儲存大小限制在4kb。那麼為什麼必須要有服務才能使用cookie呢？因為只要有請求涉及cookie，cookie就要在伺服器和瀏覽器之間來回傳送，而且由於瀏覽器的跨域限制，客戶端和服務端必須要保證同源的原則（也就是跨域問題，詳情見我的其他文章），由於cookie是存放在前端的，所以安全問題一直是個大問題，因此一般重要的資訊不建議放在cookie中存放。
2.Session
對於服務端的程式眼來說session大家肯定很熟悉了，session是一種服務端的機制，也就是能把資訊存放在服務端，所以安全可以保障，它的原理是通過session id來識別客戶端，這個session id是存放在cookie中的（當然session id讓使用者看見沒無妨），服務端會通過session id來識別客戶端進行匹配和判斷。它和cookie對比起來差距就很明顯了，一個是把資料存在客戶端；一個存在服務端，從安全性考慮的話一般像使用者名稱密碼這種私密資訊一般放在session中。
3.localStorage
它的特點就是“持久”，一旦通過儲存，不通過手動清除的話，就會一直儲存在前端，它的儲存格式是鍵值對的方式也就是“key-value”的方式儲存的，它的儲存空間大小限制在500萬字元左右，一下是它的一些使用方法：
localStorage.length 獲得storage中的個數 localStorage.key(n) 獲得storage中第n個元素對的鍵值（第一個元素是0） localStorage.getItem(key) 獲取鍵值key對應的值 localStorage.key 獲取鍵值key對應的值 localStorage.setItem(key, value) 新增資料，鍵值為key，值為value localStorage.removeItem(key) 移除鍵值為key的資料 localStorage.clear() 清除所有資料
4.sessionStorage
這個和localStorage有什麼區別呢？sessionStorage是一種會話級別的本地儲存，一旦關閉瀏覽器他就會消失，而前者是很“持久”的，即使你關閉一萬次瀏覽器也沒事，所以差距還是很大的。後兩者是H5才有的特性，因為現在都是前後端分離的開發模式，前端工程師都很青睞這兩種前端快取方式，以下是sessionStorage的記本用法：
sessionStorage.length 獲得storage中的個數 sessionStorage.key(n) 獲得storage中第n個元素對的鍵值（第一個元素是0） sessionStorage.getItem(key) 獲取鍵值key對應的值 sessionStorage.key 獲取鍵值key對應的值 sessionStorage.setItem(key, value) 新增資料，鍵值為key，值為value sessionStorage.removeItem(key) 移除鍵值為key的資料 sessionStorage.clear() 清除所有資料