前言

前端存儲的方式有很多種，包括了離線緩存（application cache），Web SQL，IndexedDB以及本地存儲的Cookie、LocalStorage、SessionStorage，本文主要對Cookie、LocalStorage、SessionStorage這三者的作用、區(qū)別以及應(yīng)用場景進行描述。

COOKIE

含義

Cookie又叫會話跟蹤技術(shù)，事實上就是以Key，Value的形式存儲在瀏覽器端的數(shù)據(jù)。

工作原理

1.在Request的時候，瀏覽器將Cookie信息放在HTTP-Request Headers中。
2.在Response的時候，瀏覽器保存HTTP-Response Headers信息中的Cookie信息。
3.Cookie的核心信息包含三個部分：Name、Value、過期時間。
4.Cookie的保存是覆蓋式的，所以Cookie的添加、更新、刪除對于瀏覽器來說都是執(zhí)行設(shè)置（set）的動作。
5.存儲屬性除了Name、Value、過期時間，還有Domain、Path，當(dāng)前域可以操作當(dāng)前域子域、父域名的Cookie，當(dāng)前Path，可以操作當(dāng)前Path以及當(dāng)前Path子、父Path下的Cookie

為什么需要強調(diào)它的工作原理呢？事實上cookie的作用、缺點甚至于缺點的改善都是圍繞工作原理進行的。

作用

• 會話狀態(tài)管理（如用戶登錄狀態(tài)、購物車、游戲分?jǐn)?shù)和其它需要記錄的信息）
• 個性化設(shè)置（如用戶自定義設(shè)置、主題等）

傳輸特點

• 每次Request客戶端符合domian以及path要求的Cookie都會通過Request Headers傳輸?shù)椒?wù)器端
• 傳輸?shù)腃ookie大小會受到瀏覽器以及Web服務(wù)器的限制

安全特點

• Cookie中的信息很容易被查看，建議加密后存儲
• Cookie容易被XSS攻擊利用，可以設(shè)置HttpOnly=true，不允許客戶端訪問

應(yīng)用

• 設(shè)置：document.cookie = 'key=val;path:/;expires='+d （d為時間）
• 獲取：document.cookie
• 刪除cookie： 將過期時間設(shè)置為負值

缺點

• 存儲大小最多4KB
• 存儲數(shù)量根據(jù)瀏覽器或瀏覽器版本的不同而不同，并且每個域最多20條
• 不安全（請求頭常帶存儲信息）
• 存儲數(shù)據(jù)類型限制，cookie只能存儲字符串

提高安全性措施

• 對保存到cookie里面的敏感信息必須加密
• 設(shè)置HttpOnly為true，防止Cookie值被頁面腳本讀取
• 設(shè)置Secure為true，只有在https協(xié)議下訪問的時候，瀏覽器才會發(fā)送該Cookie
• 給Cookie設(shè)置有效期（分一個長時間不活動的失效時間與即使一直在活動也要失效的時間）

Web Storage

準(zhǔn)確地來說，因為cookie確切地存在著缺點，h5也對其進行了優(yōu)化。因此localStorage和sessionStorage解決了不少cookie的缺點，也被作為本地存儲的重要方式。

Web Storage API

length——數(shù)據(jù)長度
setItem (key, value) —— 保存數(shù)據(jù)，以鍵值對的方式儲存信息
getItem (key) —— 獲取數(shù)據(jù)，將鍵值傳入，即可獲取到對應(yīng)的value值
removeItem (key) —— 刪除單個數(shù)據(jù)，根據(jù)鍵值移除對應(yīng)的信息
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個索引的key

LocalStorage

特點

• 生命周期是永久性的。即使關(guān)閉瀏覽器，數(shù)據(jù)也不會銷毀
• 存儲大小一般為5M
• 需要主動去銷毀
• 儲存的對象類型均為字符串類型
• 同源可以讀取并修改localStorage數(shù)據(jù)

SessionStorage

特點

• 生命周期是在瀏覽器關(guān)閉前。即關(guān)閉瀏覽器數(shù)據(jù)就會銷毀
• 存儲大小一般為5M
• 儲存的對象類型均為字符串類型
• 只允許同一窗口訪問