一、JS中的三種數據存儲方式
cookie、sessionStorage、localStorage
二、cookie
1、cookie的定義：
cookie是存儲在瀏覽器上的一小段數據，用來記錄某些當頁面關閉或者刷新后仍然需要記錄的信息。在控制台用document.cookie可以查看當前正在瀏覽網站的cookie。
2、cookie存在安全問題：
cookie雖然很方便，但是使用cookie有一個很大的弊端，cookie中的所有數據在客戶端就可以被修改，數據非常容易被偽造，那么一些重要的數據就不能放在cookie中了，而且如果cookie中數據字段太多會影響傳輸效率
3、cookie的作用
-
保存用戶登錄狀態。例如將用戶id存儲於一個cookie內，這樣當用戶下次訪問該頁面時就不需要重新登錄了，現在很多論壇和社區都提供這樣的功能。 cookie還可以設置過期時間，當超過時間期限后，cookie就會自動消失。因此，系統往往可以提示用戶保持登錄狀態的時間：常見選項有一個月、三個 月、一年等。
-
跟蹤用戶行為。例如一個天氣預報網站，能夠根據用戶選擇的地區顯示當地的天氣情況。如果每次都需要選擇所在地是煩瑣的，當利用了 cookie后就會顯得很人性化了，系統能夠記住上一次訪問的地區，當下次再打開該頁面時，它就會自動顯示上次用戶所在地區的天氣情況。因為一切都是在后 台完成，所以這樣的頁面就像為某個用戶所定制的一樣，使用起來非常方便
-
定制頁面。如果網站提供了換膚或更換布局的功能，那么可以使用cookie來記錄用戶的選項，例如：背景色、分辨率等。當用戶下次訪問時，仍然可以保存上一次訪問的界面風格。
三、sessionStorage
當用戶用賬號和密碼登錄某個網站后，刷新頁面仍然保持登錄的狀態，服務器如何分辨這次發起請求的用戶是剛才登錄過的用戶呢？這里就是用session保存狀態。
用戶在輸入用戶名密碼提交給服務器，服務端驗證通過后會創建一個session用於記錄用戶的相關信息，這個session可保存在服務器內存中也可保存在數據庫中。
- 創建session后，會把關聯的session_id通過setCookie添加到http相應頭部
- 瀏覽器在加載頁面時發現響應頭部有set-cookie字段，就把這個cookie種到瀏覽器指定域名下
- 當下次刷新頁面時，發送的請求會帶上這條cookie，服務端在接收到后根據這個session_id來識別用戶。
四、localStorage
-
localStorage是H5本地存儲web storage特性的API之一，用於將大量數據（最大5M）保存在瀏覽器中，保存后數據永遠存在不會失效過期，除非用js手動清除。
-
不參與網絡傳輸
-
一般用於性能優化，可以保存圖片、js、css、html模板、大量數據
五、cookie、sessionStorage、localStorage之間的區別
相同點：都是存儲在瀏覽器端。並且是同源的
不同點：
1、存儲大小
一般瀏覽器存儲cookie最大容量為4kb，很多瀏覽器都限制一個站點最多保存20個cookie。
sessionStorage和localStorage雖然也有存儲大小的限制，但是要比cookie大得多。
2、存儲有效期：
cookie保存的數據在過期時間之前一直有效，即使關閉瀏覽器
sessionStorage保存的數據用於瀏覽器的一次會話（session），當會話結束（通常是窗口關閉），數據被清空；
localStorage保存的數據長期存在，因為localStorage的數據是寫入磁盤中，每次讀取數據時，實際上是從硬盤驅動器上讀取這些字節。
3、安全性
cookie中的所有數據在客戶端就可以被修改，數據非常容易被偽造，所以對於用戶信息來講，應該將與登錄相關的重要信息存儲在session中。
4、性能
如果cookie中數據字段太多的話，會影響傳輸效率，此時需要將重要的信息存放在session中。
但是，session會在一定的時間內保存在服務器上，當訪問增多時，會影響服務器的性能。為了減輕服務器的負擔，應當使用cookie
參考鏈接：https://www.jianshu.com/p/775b64b3d35f