前端幾種本地快取機制
2. Session
說到Cookie就不能不說Session。
Session機制。session機制是一種伺服器端的機制，伺服器使用一種類似於散列表的結構（也可能就是使用散列表）來儲存資訊。當程式需要為某個客戶端的請求建立一個session時，伺服器首先檢查這個客戶端的請求裡是否已包含了一個session標識（稱為session id），如果已包含則說明以前已經為此客戶端建立過session，伺服器就按照session id把這個session檢索出來使用（檢索不到，會新建一個），如果客戶端請求不包含session id，則為此客戶端建立一個session並且生成一個與此session相關聯的session id，session id的值應該是一個既不會重複，又不容易被找到規律以仿造的字串，這個session id將被在本次響應中返回給客戶端儲存。儲存這個session id的方式可以採用cookie，這樣在互動過程中瀏覽器可以自動的按照規則把這個標識傳送給伺服器。一般這個cookie的名字都是類似於SEEESIONID。但cookie可以被人為的禁止，則必須有其他機制以便在cookie被禁止時仍然能夠把session id傳遞迴伺服器。經常被使用的一種技術叫做URL重寫，就是把session id直接附加在URL路徑的後面。比如：
http://damonare.cn?sessionid=123456還有一種技術叫做表單隱藏欄位。就是伺服器會自動修改表單，新增一個隱藏欄位，以便在表單提交時能夠把session id傳遞迴伺服器。比如：
| 1234 | <form name="testform" action="/xxx"> <input type="hidden" name="sessionid" value="123456"> <input type="text"></form> |
實際上這種技術可以簡單的用對action應用URL重寫來代替。
3 Cookie和Session簡單對比
Cookie和Session 的區別：
-
1）cookie資料存放在客戶的瀏覽器上，session資料放在伺服器上。
-
2）cookie不是很安全，別人可以分析存放在本地的cookie並進行cookie欺騙，考慮到安全應當使用session。
-
3）session會在一定時間內儲存在伺服器上。當訪問增多，會比較佔用你伺服器的效能考慮到減輕伺服器效能方面，應當使用cookie。
- 4）單個cookie儲存的資料不能超過4K，很多瀏覽器都限制一個站點最多儲存20個cookie。
-
5）所以建議：
- 將登陸資訊等重要資訊存放為SESSION
- 其他資訊如果需要保留，可以放在cookie中
4 document.cookie的屬性
expires屬性
指定了coolie的生存期，預設情況下coolie是暫時存在的，他們儲存的值只在瀏覽器會話期間存在，當用戶推出瀏覽器後這些值也會丟失，如果想讓cookie存在一段時間，就要為expires屬性設定為未來的一個過期日期。現在已經被max-age屬性所取代，max-age用秒來設定cookie的生存期。
path屬性
它指定與cookie關聯在一起的網頁。在預設的情況下cookie會與建立它的網頁，該網頁處於同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯。
domain屬性
domain屬性可以使多個web伺服器共享cookie。domain屬性的預設值是建立cookie的網頁所在伺服器的主機名。不能將一個cookie的域設定成伺服器所在的域之外的域。例如讓位於order.damonare.cn的伺服器能夠讀取catalog.damonare.cn設定的cookie值。如果catalog.damonare.cn的頁面建立的cookie把自己的path屬性設定為“/”，把domain屬性設定成“.damonare.cn”，那麼所有位於catalog.damonare.cn的網頁和所有位於orlders.damonare.cn的網頁，以及位於damonare.cn域的其他伺服器上的網頁都可以訪問這個cookie。
secure屬性
它是一個布林值，指定在網路上如何傳輸cookie，預設是不安全的，通過一個普通的http連線傳輸
5. localStorage
這是一種持久化的儲存方式，也就是說如果不手動清除，資料就永遠不會過期。
它也是採用Key - Value的方式儲存資料，底層資料介面是sqlite，按域名將資料分別儲存到對應資料庫檔案裡。它能儲存更大的資料（IE8上是10MB，Chrome是5MB），同時儲存的資料不會再發送給伺服器，避免頻寬浪費。
localStorage的屬性方法
下表是localStorge的一些屬性和方法
| 屬性方法 | 說明 |
|---|---|
| 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() | 清除所有資料 |
localStorage的缺點
- ① localStorage大小限制在500萬字符左右，各個瀏覽器不一致
- ② localStorage在隱私模式下不可讀取
- ③ localStorage本質是在讀寫檔案，資料多的話會比較卡（firefox會一次性將資料匯入記憶體，想想就覺得嚇人啊）
- ④ localStorage不能被爬蟲爬取，不要用它完全取代URL傳參
6. sessionStorage
和伺服器端使用的session類似，是一種會話級別的快取，關閉瀏覽器會資料會被清除。不過有點特別的是它的作用域是視窗級別的，也就是說不同視窗間的sessionStorage資料不能共享的。使用方法（和localStorage完全相同）：
| 屬性方法 | 說明 |
|---|---|
| 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() | 清除所有資料 |
7. sessionStorage和localStorage的區別
-
sessionStorage用於本地儲存一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷燬。因此sessionStorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。當用戶關閉瀏覽器視窗後，資料立馬會被刪除。
-
localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。第二天、第二週或下一年之後，資料依然可用。