大家好，我是IT修真院北京分院25期的學員，一枚正直純潔善良的web前端程序員
今天給大家分享一下，修真院官網js任務6，深度思考中的知識點——cookies，sessionStorage和localStorage的區別？？
1.背景介紹
SessionStorage, LocalStorage, Cookie這三者都可以被用來在瀏覽器端存儲數據，而且都是字符串類型的鍵值對。
區別在于前兩者屬于WebStorage，創建它們的目的便于客戶端存儲數據。 而Cookie早在網景公司的瀏覽器中就開始支持，最初目的是為了保持HTTP的狀態。
2.知識剖析
Cookie?
HTTP Cookie（也叫Web cookie或者瀏覽器Cookie）是服務器發送到用戶瀏覽器并保存在瀏覽器上的一塊數據，它會在瀏覽器下一次發起請求時被攜帶并發送到服務器上。比較經典的，可以它用來確定兩次請求是否來自于同一個瀏覽器，從而能夠確認和保持用戶的登錄狀態。Cookie的使用使得基于無狀態的HTTP協議上記錄穩定的狀態信息成為了可能。
sessionStorage
sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 localStorage
里面存儲的數據沒有過期時間設置，而存儲在 sessionStorage
里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。在新標簽或窗口打開一個頁面會初始化一個新的會話，這點和 session
cookies 的運行方式不同。
localStorage
localStorage 屬性允許你訪問一個 local Storage 對象。localStorage 與 sessionStorage 相似。不同之處在于，存儲在 localStorage
里面的數據沒有過期時間（expiration time），而存儲在 sessionStorage 里面的數據會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。
3.常見問題
問題：Cookie是如何工作的？
Cookie可用于客戶端數據的存儲，在沒有其它存儲辦法時，使用這種方式是可行的，但隨著現在瀏覽器開始支持各種各樣的存儲方式而逐漸被廢棄。
由于服務器指定Cookie以后瀏覽器的每次請求都會攜帶Cookie數據，這會帶來額外的性能負擔（尤其是在移動環境下）。
新的瀏覽器API已經允許開發者直接在本地存儲數據，如可以使用Web storage API （本地存儲和會話存儲）和IndexedDB（索引數據庫）。
Cookie主要用在以下三個方面:
會話狀態管理（如用戶登錄狀態、購物車）
個性化設置（如用戶自定義設置）
瀏覽器行為跟蹤（如跟蹤分析用戶行為）
Cookie的缺陷
每個 HTTP 請求中都包含 Cookies，從而導致傳輸相同的數據減緩我們的 Web 應用程序。
每個 HTTP 請求中都包含 Cookies，從而導致發送未加密的數據到互聯網上。（除非用HTTPS）
Cookies 只能存儲有限的 4KB 數據，對于復雜的存儲需求來說是不夠用的。
LocalStorage和SessionStorage?
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。 不會被發送到服務器上。同時空間比Cookie大很多，一般支持5-10M。
與Cookie類似，每個域名下會有不同的localStorage和SessionStorage實例。
sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后（關閉標簽頁，不包括刷新和跳轉）
數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage可以在多個標簽頁中互相訪問用于持久化的本地存儲，可以在多個標簽頁中互相訪問,除非主動刪除數據，否則數據是永遠不會過期的。
注意SessionStorage中的Session指的是瀏覽器會話，而非服務器端通過Cookie實現的Session。
Storage的使用
LocalStorage/SessionStorage也是基于字符串的鍵值對存儲。可以通過setItem，getItem,clear,removeIteml來存取控制數據：
clear()：刪除所有值。
getItem(name)：根據指定的名字name獲取對應的值
key(index)：在指定的數字位置獲取該位置的名字。
removeItem(name)：刪除由name指定的名值對
setItem(name,value)：為指定名字設置一個對應的值
localStorage.setItem("name","wangerxiao");
//這樣就用localStorage存儲了一個名字為name的數據，數據的內容為 “wangerxiao"
localStorage.getItem("name");
//這樣就讀取了名字為“name”的數據的值。
但是，storage只能存儲字符串的數據，對于JS中常用的數組或對象卻不能直接存儲。
var obj = { name:'Jim' };
sessionStorage.obj = obj;
localStorage.obj = obj;
var arr = [1,2,3];
sessionStorage.obj = arr;
localStorage.obj = arr;
注意：上面這種寫法是錯誤的
但我們可以通過JSON對象提供的parse和stringify將其他數據類型轉化成字符串，再存儲到storage中就可以了。
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//讀取
str = sessionStorage.obj;
//重新轉換為對象
obj = JSON.parse(str);
4.解決方案
5.編碼實戰
6.擴展思考
總結：sessionStorage 、localStorage 和 cookie 之間的異同
共同點：都是保存在瀏覽器端，且同源的。
不同點：
1.cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。
而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
2.存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
3.數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；
cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5.Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。
6.Web Storage 的 api 接口使用更方便。
7.參考文獻
參考謝燦勇的博客
參考使用sessionStorage、localStorage存儲數組與對象
參考請描述一下 cookies，sessionStorage 和 localStorage 的區別？
8.更多討論
1. 問：angualr如何修改過期時間cookie
? ?答：使用$cookie方法
2. 問：storage的API有那些
? ?答：clear()，getItem()，key()，removeItem()，setItem()
3. 問：怎樣獲取cookie的存儲內容
? ? 答：$cookieStore.get
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這里是技能樹.IT修真院，成千上萬的師兄在這里找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧?！
