摘要:目的是克服由所帶來(lái)的一些限制,當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(shí),不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。的生命周期是在僅在當(dāng)前會(huì)話下有效。但是在關(guān)閉了瀏覽器窗口后就會(huì)被銷(xiāo)毀。刪除單個(gè)數(shù)據(jù),根據(jù)鍵值移除對(duì)應(yīng)的信息。
導(dǎo)語(yǔ)
我們?cè)谧鲰?xiàng)目的時(shí)候,經(jīng)常把Cookie和Session掛在嘴邊,可實(shí)際對(duì)于他們了解的也是很少,只是會(huì)使用,但這遠(yuǎn)遠(yuǎn)不夠,熟練的掌握他們的特性才能把項(xiàng)目做的更好。下面我們就來(lái)認(rèn)識(shí)一下他們吧!
### 先來(lái)了解一下Cache
Cache表示數(shù)據(jù)緩存,合理的設(shè)置cache,它可以幫助我們提高訪問(wèn)速度,減少請(qǐng)求(在緩存有效期內(nèi)直接讀取Cache文件),減少文件從服務(wù)器直接拉取文件(緩存過(guò)期后,請(qǐng)求服務(wù)器器檢查文件是否被更改,如沒(méi)有被更改則返回304然后讀取Cache);
Cache的數(shù)據(jù)一般是服務(wù)器上不經(jīng)常變動(dòng)的數(shù)據(jù),如圖片、某些數(shù)據(jù)js、html、php等;如果是經(jīng)常變動(dòng)的數(shù)據(jù)一般是不被緩存的,沒(méi)有意義;如果把一個(gè)經(jīng)常變動(dòng)的文件緩存起來(lái)的話,沒(méi)有多大意義。
讀取Cache的過(guò)程
首先檢查文件設(shè)置的緩存是否過(guò)期:
如果過(guò)期了,則會(huì)重新發(fā)送請(qǐng)求到服務(wù)器,檢查該文件是否有被更新,如果沒(méi)有被更新,則服務(wù)器會(huì)返回304 Not Modified,表示服務(wù)器上該文件沒(méi)有被更新,用戶發(fā)起的對(duì)該文件請(qǐng)求則會(huì)直接從本地cache讀取;如果服務(wù)上文件被更新了,則服務(wù)器會(huì)返回新的文件,此時(shí)http返回碼為200 ok,更新緩存。
如果沒(méi)有過(guò)期,則會(huì)直接讀取本地cache文件,不再發(fā)起http請(qǐng)求;
在瀏覽器的控制臺(tái)的Network,我們可以看到一些文件的Headers,我們來(lái)說(shuō)說(shuō)其中的一些頭部設(shè)置的作用:
Responese Headers
access-control-allow-origin:* cache-control:max-age=691200 content-length:0 date:Sun, 22 Apr 2018 03:25:41 GMT etag:"5ad8603c-214cb" expires:Fri, 27 Apr 2018 13:33:04 GMT server:marco/2.0 status:304 via:T.3.H, M.ctn-fj-foc-007 x-request-id:30e1ceac71122f15ed9144c272406682
Request Headers
:authority:static.segmentfault.com :method:GET :path:/v-5ad86038/3rd/assets.js :scheme:https accept:*/* accept-encoding:gzip, deflate, sdch, br accept-language:zh-CN,zh;q=0.8 cache-control:max-age=0 if-modified-since:Thu, 19 Apr 2018 09:24:12 GMT if-none-match:W/"5ad8603c-214cb" origin:https://segmentfault.com referer:https://segmentfault.com/user/settings?tab=notify user-agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.104 Safari/537.36 Core/1.53.5006.400 QQBrowser/9.7.13080.400
expires
expires是HTTP/1.0控制網(wǎng)頁(yè)緩存的字段,表示服務(wù)器返回該請(qǐng)求結(jié)果緩存的到期時(shí)間,即再次發(fā)起該請(qǐng)求時(shí),如果客戶端的時(shí)間小于Expires的值時(shí),直接使用緩存結(jié)果;expires=當(dāng)前服務(wù)器date+緩存有效時(shí)間;時(shí)間格式為GTM,是一個(gè)絕對(duì)值。
cache-control
用戶控制http的緩存,max-age表示客戶端可以接收生存期不大于指定時(shí)間(以秒為單位)的響應(yīng);max-age=0;表示每次請(qǐng)求該文件時(shí),都需要請(qǐng)求服務(wù)器檢查文件在上一次被緩存時(shí)有無(wú)修改過(guò);max-age=10;表示10s內(nèi)再次對(duì)該文件發(fā)起請(qǐng)求則不需要向服務(wù)器發(fā)起請(qǐng)求讀取文件,直接讀取本地cache文件;
在HTTP/1.1中,Cache-Control是最重要的規(guī)則,主要用于控制網(wǎng)頁(yè)緩存,主要取值為:
public:所有內(nèi)容都將被緩存(客戶端和代理服務(wù)器都可緩存)
private:所有內(nèi)容只有客戶端可以緩存,Cache-Control的默認(rèn)取值
no-cache:客戶端緩存內(nèi)容,但是是否使用緩存則需要經(jīng)過(guò)協(xié)商緩存來(lái)驗(yàn)證決定
no-store:所有內(nèi)容都不會(huì)被緩存,即不使用強(qiáng)制緩存,也不使用協(xié)商緩存
max-age=xxx (xxx is numeric):緩存內(nèi)容將在xxx秒后失效,是一個(gè)相對(duì)值
由于**Cache-Control的優(yōu)先級(jí)比expires**,那么直接根據(jù)Cache-Control的值進(jìn)行緩存,意思就是說(shuō)在600秒內(nèi)再次發(fā)起該請(qǐng)求,則會(huì)直接使用緩存結(jié)果,強(qiáng)制緩存生效。 ***注:在無(wú)法確定客戶端的時(shí)間是否與服務(wù)端的時(shí)間同步的情況下,Cache-Control相比于expires是更好的選擇,所以同時(shí)存在時(shí),只有Cache-Control生效。***
以上只是簡(jiǎn)單的了解一下Cache,更深入的了解瀏覽器的緩存機(jī)制,可以看看這篇文章-->徹底理解瀏覽器的緩存機(jī)制,講得深入,看完會(huì)對(duì)你有很大的幫助。
CookieCookie是客戶端存儲(chǔ)數(shù)據(jù)的一個(gè)一種選項(xiàng)。
當(dāng)我們向服務(wù)器發(fā)送任意的HTTP請(qǐng)求的時(shí)候,服務(wù)器會(huì)返回一個(gè)帶有Set-Cookie的HTTP響應(yīng)頭返回給瀏覽器,其中包含一些會(huì)話信息。這種響應(yīng)頭可能如下:
// Response Headers 響應(yīng)頭 HTTP/1.1 200 OK Server: nginx/1.10.1 Date: Sun, 22 Apr 2018 06:16:14 GMT Content-Type: text/html Expires: Thu, 19 Nov 1981 08:52:00 GMT Cache-Control: no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma: no-cache Set-Cookie: SID=t65ln3kllu7ujutldk4hcota05; path=/ Content-Encoding: gzip
這個(gè)響應(yīng)頭設(shè)置SID為名稱,t65ln3kllu7ujutldk4hcota05為值的一個(gè)Cookie。
如果用戶不是第一次訪問(wèn),即:本地已經(jīng)存在cookie,則在發(fā)送請(qǐng)求時(shí)會(huì)將cookie一并發(fā)給服務(wù)器,服務(wù)器收到請(qǐng)求之后會(huì)作出相應(yīng)處理,返回對(duì)應(yīng)的信息;這種請(qǐng)求頭可能如下:
// request Headers 請(qǐng)求頭 Accept:*/* Accept-Encoding:gzip, deflate, sdch Accept-Language:zh-CN,zh;q=0.8 Connection:keep-alive Cookie: SID=t65ln3kllu7ujutldk4hcota05
Cookie的設(shè)置
設(shè)置方式為:
document.cookie="name=value;domain=域名;path=/;expires=過(guò)期時(shí)間;secure"
其中name和value是必須,其他為可選;name和value都需要經(jīng)過(guò)URL編碼--encodeURIComponent()
現(xiàn)在介紹一下Cookie的構(gòu)成:
name :一個(gè)唯一確定Cookie的名稱,不區(qū)分大小寫(xiě),獲取Cookie是根據(jù)name來(lái)查找
value:存儲(chǔ)在Cookie中的字符串值
domain:Cookie對(duì)于哪個(gè)域有效,比如domain="aa.qq.com",那么qq.com就不可以讀取該Cookie,如果沒(méi)有設(shè)置,會(huì)默認(rèn)該請(qǐng)求來(lái)自當(dāng)前域。
path:對(duì)于指定域中的哪個(gè)路徑。比如path="/book/",那么對(duì)于www.aa.qq.com/cc/的請(qǐng)求就不能發(fā)送Cookie
expires:Cookie過(guò)期時(shí)間,這個(gè)值是GMT格式的日期
secure:設(shè)置這個(gè)標(biāo)志后,Cookie只有在SSL鏈接的時(shí)候才會(huì)發(fā)送給服務(wù)器,比如https://www.aa.qq.com可以,而http://www.aa.qq.com就不行
Cookie的缺點(diǎn)
Cookie在每個(gè)瀏覽器以及版本的數(shù)量都不同
IE6一下版本每個(gè)域名最多20個(gè)
IE7以上的版本每個(gè)域名最多50個(gè)
FireFox每個(gè)域名最多50個(gè)
Opera每個(gè)域名最多30個(gè)
Safari和Chrome沒(méi)有硬性規(guī)定,應(yīng)該是有一個(gè)極限的
大小受限,一般是在4k左右,最好別超過(guò)4k
用戶可以操作禁用cookie,使功能受限
安全性較低
有些狀態(tài)不可能保存在客戶端
每次訪問(wèn)都要傳送cookie給服務(wù)器,浪費(fèi)帶寬。
cookie數(shù)據(jù)有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下。
瀏覽器提供設(shè)置Cookie方法比較簡(jiǎn)陋,操作會(huì)比較麻煩,我們可以自己動(dòng)手封裝一個(gè)
class CookieUtil{ constructor(){ } get(name){ var cookies=document.cookie.split(";"); var curCookie; for(var i=0;iSession Session是保存在服務(wù)端的,通過(guò)類(lèi)似與Hashtable的數(shù)據(jù)結(jié)構(gòu)來(lái)保存,能支持任何類(lèi)型的對(duì)象(session中可含有多個(gè)對(duì)象)
Session機(jī)制
當(dāng)服務(wù)器收到請(qǐng)求需要?jiǎng)?chuàng)建session對(duì)象時(shí),首先會(huì)檢查客戶端請(qǐng)求中是否包含sessionid。如果有sessionid,服務(wù)器將根據(jù)該id返回對(duì)應(yīng)session對(duì)象。如果客戶端請(qǐng)求中沒(méi)有sessionid,服務(wù)器會(huì)創(chuàng)建新的session對(duì)象,并把sessionid在本次響應(yīng)中返回給客戶端。通常使用cookie方式存儲(chǔ)sessionid到客戶端,在交互中瀏覽器按照規(guī)則將sessionid發(fā)送給服務(wù)器。如果用戶禁用cookie,則要使用URL重寫(xiě),可以通過(guò)response.encodeURL(url)進(jìn)行實(shí)現(xiàn);API對(duì)encodeURL的約束為:當(dāng)瀏覽器支持Cookie時(shí),url不做任何處理;當(dāng)瀏覽器不支持Cookie的時(shí)候,將會(huì)重寫(xiě)URL將SessionID拼接到訪問(wèn)地址后。
Session的優(yōu)點(diǎn)
大小沒(méi)有限制
session的安全性大于cookie,原因如下:
sessionID存儲(chǔ)在cookie中,若要攻破session首先要攻破cookie
sessionID是要有人登錄,或者啟動(dòng)session_start(php中的方法)才會(huì)有,所以攻破cookie也不一定能得到sessionID
第二次啟動(dòng)session_start后,前一次的sessionID就是失效了,session過(guò)期后,sessionID也隨之失效。
sessionID是加密的
Session的缺點(diǎn)
Session保存的東西越多,就越占用服務(wù)器內(nèi)存,對(duì)于用戶在線人數(shù)較多的網(wǎng)站,服務(wù)器的內(nèi)存壓力會(huì)比較大。
依賴于cookie(sessionID保存在cookie),如果禁用cookie,則要使用URL重寫(xiě),不安全
創(chuàng)建Session變量有很大的隨意性,可隨時(shí)調(diào)用,不需要開(kāi)發(fā)者做精確地處理,所以,過(guò)度使用session變量將會(huì)導(dǎo)致代碼不可讀而且不好維護(hù)。
StorageWebStorage目的是克服由cookie所帶來(lái)的一些限制,當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端時(shí),不需要持續(xù)的將數(shù)據(jù)發(fā)回服務(wù)器。
Webstorage的兩個(gè)主要目標(biāo):
提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的路徑。
提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制。
HTML5的WebStorage提供了兩種API:localStorage(本地存儲(chǔ))和sessionStorage(會(huì)話存儲(chǔ))。
生命周期
localStorage:localStorage的生命周期是永久的,關(guān)閉頁(yè)面或?yàn)g覽器之后localStorage中的數(shù)據(jù)也不會(huì)消失。localStorage除非主動(dòng)刪除數(shù)據(jù),否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失。
sessionStorage的生命周期是在僅在當(dāng)前會(huì)話下有效。sessionStorage引入了一個(gè)“瀏覽器窗口”的概念,sessionStorage是在同源的窗口中始終存在的數(shù)據(jù)。只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉,即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面,數(shù)據(jù)依然存在。但是sessionStorage在關(guān)閉了瀏覽器窗口后就會(huì)被銷(xiāo)毀。同時(shí)獨(dú)立的打開(kāi)同一個(gè)窗口同一個(gè)頁(yè)面,sessionStorage也是不一樣的。
存儲(chǔ)大小:
localStorage和sessionStorage的存儲(chǔ)數(shù)據(jù)大小一般都是:5MB
存儲(chǔ)位置:
localStorage和sessionStorage都保存在客戶端,不與服務(wù)器進(jìn)行交互通信。
存儲(chǔ)內(nèi)容類(lèi)型:
localStorage和sessionStorage只能存儲(chǔ)字符串類(lèi)型,對(duì)于復(fù)雜的對(duì)象可以使用ECMAScript提供的JSON對(duì)象的stringify和parse來(lái)處理
獲取方式:
localStorage:window.localStorage;;
sessionStorage:window.sessionStorage;。
應(yīng)用場(chǎng)景:
localStoragese:常用于長(zhǎng)期登錄(+判斷用戶是否已登錄),適合長(zhǎng)期保存在本地的數(shù)據(jù)。
sessionStorage:敏感賬號(hào)一次性登錄;
WebStorage的優(yōu)點(diǎn):
存儲(chǔ)空間更大:
cookie為4KB,而WebStorage是5MB;
節(jié)省網(wǎng)絡(luò)流量:
WebStorage不會(huì)傳送到服務(wù)器,存儲(chǔ)在本地的數(shù)據(jù)可以直接獲取,也不會(huì)像cookie一樣美詞請(qǐng)求都會(huì)傳送到服務(wù)器,所以減少了客戶端和服務(wù)器端的交互,節(jié)省了網(wǎng)絡(luò)流量;
對(duì)于那種只需要在用戶瀏覽一組頁(yè)面期間保存而關(guān)閉瀏覽器后就可以丟棄的數(shù)據(jù),sessionStorage會(huì)非常方便;
快速顯示:
有的數(shù)據(jù)存儲(chǔ)在WebStorage上,再加上瀏覽器本身的緩存。獲取數(shù)據(jù)時(shí)可以從本地獲取會(huì)比從服務(wù)器端獲取快得多,所以速度更快;
安全性:
WebStorage不會(huì)隨著HTTP Header發(fā)送到服務(wù)器端,所以安全性相對(duì)于cookie來(lái)說(shuō)比較高一些,不會(huì)擔(dān)心截獲,但是仍然存在偽造問(wèn)題;
WebStorage提供了一些方法,數(shù)據(jù)操作比cookie方便;
setItem (key, value) —— 保存數(shù)據(jù),以鍵值對(duì)的方式儲(chǔ)存信息。
getItem (key) —— 獲取數(shù)據(jù),將鍵值傳入,即可獲取到對(duì)應(yīng)的value值。
removeItem (key) —— 刪除單個(gè)數(shù)據(jù),根據(jù)鍵值移除對(duì)應(yīng)的信息。
clear () —— 刪除所有的數(shù)據(jù)
key (index) —— 獲取某個(gè)索引的key
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/94508.html
摘要:什么是鑒權(quán)鑒權(quán)是指驗(yàn)證用戶是否擁有訪問(wèn)系統(tǒng)的權(quán)利。傳統(tǒng)的鑒權(quán)是通過(guò)密碼來(lái)驗(yàn)證的。這種方式的前提是,每個(gè)獲得密碼的用戶都已經(jīng)被授權(quán)。接下來(lái)就一一介紹一下這三種鑒權(quán)方式。 在系統(tǒng)級(jí)項(xiàng)目開(kāi)發(fā)時(shí)常常會(huì)遇到一個(gè)問(wèn)題就是鑒權(quán),身為一個(gè)前端來(lái)說(shuō)可能我們距離鑒權(quán)可能比較遠(yuǎn),一般來(lái)說(shuō)我們也只是去應(yīng)用,并沒(méi)有對(duì)權(quán)限這一部分進(jìn)行深入的理解。 什么是鑒權(quán) 鑒權(quán):是指驗(yàn)證用戶是否擁有訪問(wèn)系統(tǒng)的權(quán)利。傳統(tǒng)的鑒權(quán)是...
摘要:只在中存放不敏感數(shù)據(jù),即使被盜也不會(huì)有重大損失。每個(gè)最多只能有條,每個(gè)長(zhǎng)度不能超過(guò),否則會(huì)被截掉。除此之外,擁有等方法,不像需要前端開(kāi)發(fā)者自己封裝,。控制表單控件的禁用狀態(tài)。規(guī)定了三種文檔類(lèi)型以及。 說(shuō)說(shuō)你對(duì)閉包的理解 Talk about your understanding of closures 使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染,缺點(diǎn)是閉...
摘要:只在中存放不敏感數(shù)據(jù),即使被盜也不會(huì)有重大損失。每個(gè)最多只能有條,每個(gè)長(zhǎng)度不能超過(guò),否則會(huì)被截掉。除此之外,擁有等方法,不像需要前端開(kāi)發(fā)者自己封裝,。控制表單控件的禁用狀態(tài)。規(guī)定了三種文檔類(lèi)型以及。 說(shuō)說(shuō)你對(duì)閉包的理解 Talk about your understanding of closures 使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染,缺點(diǎn)是閉...
摘要:只在中存放不敏感數(shù)據(jù),即使被盜也不會(huì)有重大損失。每個(gè)最多只能有條,每個(gè)長(zhǎng)度不能超過(guò),否則會(huì)被截掉。除此之外,擁有等方法,不像需要前端開(kāi)發(fā)者自己封裝,。控制表單控件的禁用狀態(tài)。規(guī)定了三種文檔類(lèi)型以及。 說(shuō)說(shuō)你對(duì)閉包的理解 Talk about your understanding of closures 使用閉包主要是為了設(shè)計(jì)私有的方法和變量。閉包的優(yōu)點(diǎn)是可以避免全局變量的污染,缺點(diǎn)是閉...
閱讀 3897·2021-09-27 13:35
閱讀 1081·2021-09-24 09:48
閱讀 2910·2021-09-22 15:42
閱讀 2349·2021-09-22 15:28
閱讀 3153·2019-08-30 15:43
閱讀 2623·2019-08-30 13:52
閱讀 2979·2019-08-29 12:48
閱讀 1458·2019-08-26 13:55