大家好，我是IT修真院北京分院第19期的學(xué)員楊超，一枚正直純潔善良的前端程序員
1.背景介紹
登錄功能，是前端經(jīng)常要完成的需求之一。
但是如何進(jìn)行登錄判斷？
需要用到什么樣的屬性或者方法？
2.知識(shí)剖析
Web Storage
WebStorage是HTML5中本地存儲(chǔ)的解決方案之一
Web Storage實(shí)際上由兩部分組成:sessionStorage與localStorage。
localStorage和sessionStorage
localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
sessionStorage存儲(chǔ)的數(shù)據(jù)只在會(huì)話(huà)期間有效，關(guān)閉瀏覽器則自動(dòng)刪除。
所以，在其它頁(yè)面保持登錄，可以在登錄后往本地storage中存儲(chǔ)一個(gè)關(guān)鍵字段（存儲(chǔ)用戶(hù)信息）,如 :login：true
在路由變化的時(shí)候，或者在頁(yè)面跳轉(zhuǎn)的時(shí)候，檢測(cè)是該字段值是否正確，不正確則跳轉(zhuǎn)登錄頁(yè)；
點(diǎn)擊注銷(xiāo)可以執(zhí)行刪除
3.常見(jiàn)問(wèn)題
為什么不用cookie？
4.解決方案
COOKIE怎么了？
1. 數(shù)據(jù)大?。鹤鳛榇鎯?chǔ)容器，cookie的大小限制在4KB左右。
2. 安全性問(wèn)題：由于在HTTP請(qǐng)求中的cookie是明文傳遞的（HTTPS不是），帶來(lái)的安全性問(wèn)題還是很大的。
3. 網(wǎng)絡(luò)負(fù)擔(dān)：我們知道cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中，在HttpRequest和HttpResponse的header中都是要被傳輸?shù)模?所以無(wú)形中增加了一些不必要的流量損失。
5.編碼實(shí)戰(zhàn)
新建一個(gè)sessionStorage：sessionStorage.login=false;
storage、cookie的設(shè)置與獲取
getItem(key):獲取指定key本地存儲(chǔ)的值
setItem(key,value)：將value存儲(chǔ)到key字段
removeItem(key):刪除指定key本地存儲(chǔ)的值
如此設(shè)置，先設(shè)置好一個(gè)sessionStorage，然后在每個(gè)頁(yè)面判斷這個(gè)數(shù)據(jù)，就實(shí)現(xiàn)了判斷登陸狀態(tài)。
6.擴(kuò)展思考
WEB STORAGE相對(duì)于COOKIE的優(yōu)勢(shì)
1.從容量上講WebStorage一般瀏覽器提供5M的存儲(chǔ)空間，用來(lái)存儲(chǔ)視頻、圖片神馬的不夠，但對(duì)于絕大部分操作足矣
2.安全性上WebStorage并不作為HTTP header發(fā)送的瀏覽器，所以相對(duì)安全。
3.從流量上講，因?yàn)閃ebStorage不傳送到服務(wù)器，所以不必要的流量可以節(jié)省。
7.參考文獻(xiàn)
請(qǐng)描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
8.更多討論
還有其他的本地存儲(chǔ)方案嗎？各自的性能如何？
視頻地址：https://v.qq.com/x/page/n05085w5zuo.html
ppt地址：https://ptteng.github.io/PPT/PPT/js-06%20login.html
今天的分享就到這里啦，歡迎大家點(diǎn)贊、轉(zhuǎn)發(fā)、留言、拍磚~
------------------------------------------------------------------------------------------------------------------------
技能樹(shù).IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開(kāi)始，找個(gè)師兄，帶你入門(mén)，掌控自己學(xué)習(xí)的節(jié)奏，學(xué)習(xí)的路上不再迷茫”。
這里是技能樹(shù).IT修真院，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線(xiàn)，學(xué)習(xí)透明化，成長(zhǎng)可見(jiàn)化，師兄1對(duì)1免費(fèi)指導(dǎo)?？靵?lái)與我一起學(xué)習(xí)吧~
我的邀請(qǐng)碼：84150319，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/84150319
