cookie、localStorage和sessionStorage詳解

前端本地存儲

目前前端本地存儲比較常見的方式有如下三種：

1. cookie
2. localStorage
3. sessionStorage

這裏再一次清晰地記錄下這其中的一些知識點；

cookie

cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。能夠由JavaScript對其進行控制，而並非JavaScript自己的性質。Cookie意爲「甜餅」，是由W3C組織提出，最先由Netscape社區發展的一種機制。目前Cookie已經成爲標準，全部的主流瀏覽器如IE、Netscape、Firefox、Opera等都支持Cookie。

因爲HTTP是一種無狀態的協議，服務器單從網絡鏈接上無從知道客戶身份。怎麼辦呢？就給客戶端們頒發一個通行證吧，每人一個，不管誰訪問都必須攜帶本身通行證。這樣服務器就能從通行證上確認客戶身份了。這就是Cookie的工做原理。

Cookie其實是一小段的文本信息。客戶端請求服務器，若是服務器須要記錄該用戶狀態，就使用response向客戶端瀏覽器頒發一個Cookie。客戶端瀏覽器會把Cookie保存起來。當瀏覽器再請求該網站時，瀏覽器把請求的網址連同該Cookie一同提交給服務器。服務器檢查該Cookie，以此來辨認用戶狀態。服務器還能夠根據須要修改Cookie的內容。

注意：cookie是不可跨域的，不過對於相同頂級域名的二級域名仍是能夠經過設置'domain'的方法能夠進行跨域的

有些Cookie 是有限制的，一旦超過期間限制，就會被系統刪除。不少人擔憂Cookie 會泄露用戶的一些信息。但這是多餘的，Cookie 是不能經過跨域來訪問的，還有一些對象是不能脫離Cookie 來實現的，好比Session。這裏還有一個點，就是客戶端Cookie 數量最多爲300個，每一個不能超過4kb, 每一個web站點設置的cookie 數量不能超過20個。

讀取cookie

對於cookie的讀取，最基本的就是document.cookie；須要注意如下幾點：

1. cookie是相對於同域而言的，同一個域的cookie纔是互通的【設置過特殊domain的cookie能夠共享至同頂級域名的二級、三級域名下】；
2. 通常來講，只有服務器操做Cookie 才能保證一些必要的安全。但有時候，可能須要前端來增刪改查 Cookie, 這個時候我們的主角出現了——HttpOnly；HttpOnly是包含在Set-Cookie HTTP響應頭文件中的附加標誌。生成cookie時使用HttpOnly標誌有助於下降客戶端腳本訪問受保護cookie的風險（若是瀏覽器支持）。若是某一個Cookie 選項被設置成 HttpOnly = true 的話，那此Cookie 只能經過服務器端修改，Js 是操做不了的，對於 document.cookie 來講是透明的
3. document.cookie獲取的是一個字符串【寫cookie時全部各類類型的值都會被強制轉換爲字符串】，document.cookie是當前域下的全部可讀的cookie經過【key=value】的形式鏈接在一塊兒，中間使用;分號來隔開；【_app=qunar; _user=cwj; _test=sbsb】,因爲cookie中都是默認字符串，因此key/value不會存在單引號/雙引號；

寫入cookie

cookie能夠經過服務端來設置，也能夠經過前端來寫入；寫入的內容基本一致，只是寫入的方式略有不一樣；最大的區別在於服務端能夠設置'HttpOnly'這個來限制客戶端對其進行修改；

客戶端寫入：

document.cookie = newCookie;

newCookie是一個鍵值對形式的字符串。須要注意的是，用這個方法一次只能對一個cookie進行設置或更新。如下可選的cookie屬性值能夠跟在鍵值對後，用來具體化對cookie的設定/更新，使用分號以做分隔：

;path=path (例如 '/', '/mydir') 若是沒有定義，默認爲當前文檔位置的路徑。
;domain=domain (例如 'example.com'， '.example.com' (包括全部子域名),'subdomain.example.com') 若是沒有定義，默認爲當前文檔位置的路徑的域名部分。
;max-age=max-age-in-seconds (例如一年爲60*60*24*365),這項設置比expires的優先級高；
;expires=date-in-GMTString-format 若是沒有定義，cookie會在對話結束時【瀏覽器關閉後刪除】過時，這個值的格式參見Date.toUTCString() 
;secure (cookie只經過https協議傳輸)

cookie的值字符串能夠用encodeURIComponent()來保證它不包含任何逗號、分號或空格(cookie值中禁止使用這些值)。

須要注意的是若是想刪除一個cookie的話，只能是經過設置有效期爲當前時間以前【expires】或者max-age爲0

localStorage

localStorage 本地存儲是HTML5的新技術，相比cookie，它的存儲容量大，通常cookie 只有幾K。給咱們前端開發帶來了方便，可是在實際的使用中，會發現，它遠不是那麼簡單。有如下幾大特性：

1. 永久存儲單個域名存儲量比較大（推薦5MB，各瀏覽器不一樣）整體數量無限制
2. 瀏覽器關閉不清除。頁面之間能夠實現共享。同一域名下實現共享，【頂級域名和二級/三級域名不共享】
3. 只要不清除。能夠在本地永久儲存。

簡單讀取方法：

myStorage = localStorage;

返回一個 Storage 可被用於訪問當前遠端（ origin ）的本地存儲空間的對象【包括了存儲的鍵值對和length屬性】。

讀取的時候有時候也會返回異常：SecurityError
請求違反了一個策略聲明，或者遠端（ origin ）不是 a valid scheme/host/port tuple （例如若是origin使用 file: 或者 data: 形式將可能發生）。好比，用戶能夠有禁用容許對指定的origin存留數據的瀏覽器配置。

使用方法

localStorage目前有五個API供使用：

1. localStorage.getItem(key) // 推薦的根據鍵key來讀取值vakue的方法
2. localStorage.setItem(key, value) // 推薦的寫入一鍵值對的方法
3. localStorage.removeItem(key) // 推薦的根據鍵key來刪除某一鍵值對
4. localStorage.clear() // 清空
5. localStorage.key(index) // 根據索引值返回對應的key

其實localStorage能夠像JavaScriptd的對象同樣來使用，

localStorage.a、localStorage.['a'] 和 localStorage.getItem(a) 效果同樣，推薦使用最後者
localStorage.a = 'aaa'、localStorage.['a']='aaa' 和 localStorage.setItem('a','aaa') 效果同樣，推薦使用最後者

注意：localStorage目前只支持存儲字符串，其餘格式均會被轉換爲字符串來存儲，想要存儲其餘能夠考慮JSON.parse/JSON.stringify配合使用

sessionStorage

sessionStorage 屬性容許你訪問一個 session Storage 對象。它與 localStorage 類似，不一樣之處在於 localStorage 裏面存儲的數據沒有過時時間設置，而存儲在 sessionStorage 裏面的數據在頁面會話結束時會被清除。
頁面會話在瀏覽器打開期間一直保持，而且從新加載或恢復頁面仍會保持原來的頁面會話。在新標籤或窗口打開一個頁面會初始化一個新的會話，這點和 session cookies 的運行方式不一樣。
應該注意的是，不管是 localStorage 仍是 sessionStorage 中保存的數據都僅限於該頁面的協議。

使用方法徹底和localStorage徹底同樣；由於都是都是Web Storage API 的接口實現；

做爲 Web Storage API 的接口，Storage 提供了訪問特定域名下的會話存儲（ session storage）或本地存儲（ local storage）的功能，例如，能夠添加、修改或刪除存儲的數據項。
若是你想要操做一個域名的會話存儲（ session storage），可使用 Window.sessionStorage；若是想要操做一個域名的本地存儲（ local storage），可使用 Window.localStorage。

注意：和localStorage區別僅在於存在的時間，同時刷新和恢復當前頁面的話，sessionStorage都會保持原有的，可是新開頁面就會初始化一個新的sessionStorage