登入之後，在其他頁面怎麼判斷是否已經登入？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【 登入之後，在其他頁面怎麼判斷是否已經登入？】
大家好，我是IT修真院北京分院第20期的學員王野，一枚正直純潔善良的程式設計師
今天給大家分享一下，修真院官網JS任務4，深度思考中的知識點——登陸的判斷
一、背景介紹
登入功能，是前端經常要完成的需求之一。
一個 網站有很多的操作是必須要使用者登陸才能進行操作的
那麼如何進行登入判斷？
需要用到什麼樣的屬性或者方法？
有什麼地方的細節需要注意？
以上這些，都是本次小課堂要講解的重點！
二、知識剖析
如果想要實現登陸判斷，就要有一個判斷的依據。
首先，這個依據在我們訪問網站的過程中不會失效，
其次，這個依據要能儲存一定的資訊，以提供必要的判斷，
同時滿足這兩個條件有Storage和cookie
1、Web Storage
WebStorage是HTML5中本地儲存的解決方案之一
Web Storage實際上由兩部分組成:sessionStorage與localStorage。
2、localStorage和sessionStorage
localStorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。
sessionStorage儲存的資料只在會話期間有效，關閉瀏覽器則自動刪除。
3、什麼是cookie
首先，cookie,sessionStorage和localStorage，都是web儲存裡面的知識點，雖然都是網頁資料儲存，但他們產生的先後順序和應用是不同的。
cookie有時也用cookies。網景公司發展的一種機制，Cookie是由伺服器端生成，傳送給瀏覽器，瀏覽器會將Cookie的key/value儲存到某個目錄下的文字檔案內，下次請求同一網站時就傳送該Cookie給伺服器（前提是瀏覽器設定為啟用cookie）。Cookie名稱和值可以由伺服器端開發自己定義，伺服器可以設定或讀取Cookies中包含資訊，藉此維護使用者跟伺服器會話中的狀態。目前，cookie已經成為一種標準，所有的主流瀏覽器如IE、chrome、Firefox、Opera等都支援Cookie。
三、常見問題
現在多數驗證登陸的方法就是使用storage。
那為什麼不用cookie？
四、解決方案 編碼實戰
cookie怎麼了？
1. 資料大小：作為儲存容器，cookie的大小限制在4KB左右。
2. 安全性問題：由於在HTTP請求中的cookie是明文傳遞的（HTTPS不是），帶來的安全性問題還是很大的。
3. 網路負擔：我們知道cookie會被附加在每個HTTP請求中，在HttpRequest和HttpResponse的header中都是要被傳輸的，
所以無形中增加了一些不必要的流量損失。
登陸之後的localstorage
登出之後的localstorage
這是在位址列裡輸入登入之後的頁面會出現跳轉到登陸頁的現象，
程式碼實現
五、擴充套件思考
Web Storage相對於cookie的優勢
1.從容量上講WebStorage一般瀏覽器提供5M的儲存空間，用來儲存視訊、圖片神馬的不夠，但對於絕大部分操作足矣
2.安全性上WebStorage並不作為HTTP header傳送的瀏覽器，所以相對安全。
3.從流量上講，因為WebStorage不傳送到伺服器，所以不必要的流量可以節省。、
判斷登陸的方式
六、參考文獻
七、更多討論
還有其他實現登陸判斷的方法嗎？
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裡是技能樹.IT修真院，成千上萬的師兄在這裡找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！
作者：吥好使
連結：https://www.jianshu.com/p/5be0f1533263
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地