cookie

為什么會(huì)有cookie

http協(xié)議的無(wú)狀態(tài)，所謂無(wú)狀態(tài)即是服務(wù)器并不是知道這次的請(qǐng)求和上次的請(qǐng)求是不是同一個(gè)client發(fā)來(lái)的，就好比你經(jīng)常去一家超市買東西，老板并不記得你是誰(shuí)。但是如果你每次帶著你的會(huì)員卡過(guò)來(lái)，那么老板就可以識(shí)別出你是誰(shuí)了，cookie的作用類似于會(huì)員卡起的作用。

大概流程

當(dāng)服務(wù)器收到HTTP請(qǐng)求時(shí)，服務(wù)器可以在響應(yīng)頭里面添加一個(gè)Set-Cookie選項(xiàng)。瀏覽器收到響應(yīng)后通常會(huì)保存下Cookie，之后對(duì)該服務(wù)器每一次請(qǐng)求中都通過(guò)Cookie請(qǐng)求頭部將Cookie信息發(fā)送給服務(wù)器。另外，Cookie的過(guò)期時(shí)間、域、路徑、有效期、適用站點(diǎn)都可以根據(jù)需要來(lái)指定。

當(dāng)然了，瀏覽器端也可以操作cookie，document.cookie可以獲取當(dāng)前頁(yè)面的所有cookie。

細(xì)節(jié)

domain、path

這兩個(gè)屬性決定了cookie是否會(huì)被發(fā)往哪些URL

Domain 標(biāo)識(shí)指定了哪些主機(jī)可以接受Cookie。如果不指定，默認(rèn)為當(dāng)前文檔的主機(jī)（不包含子域名）。如果指定了Domain，則一般包含子域名。

例如，如果設(shè)置 Domain=mozilla.org，則Cookie也包含在子域名中（如developer.mozilla.org）。

Path 標(biāo)識(shí)指定了主機(jī)下的哪些路徑可以接受Cookie（該URL路徑必須存在于請(qǐng)求URL中）。以字符 %x2F ("/") 作為路徑分隔符，子路徑也會(huì)被匹配。

例如domain=qq.com，path=/blog，則該cookie會(huì)被發(fā)往：

• qq.com/blog

• wx.qq.com/blog

• wx.qq.com/blog/aa

• ....

expires、max-age

這兩個(gè)屬性決定了cookie在瀏覽器保存多久

具體的細(xì)節(jié)為：

• Expires 為 Cookie 的刪除設(shè)置一個(gè)過(guò)期的日期

• Max-age 設(shè)置一個(gè) Cookie 將要過(guò)期的秒數(shù)

• IE 瀏覽器(ie6、ie7 和 ie8) 不支持 max-age，所有的瀏覽器都支持 expires

• 如果同時(shí)設(shè)置了expires和max-age，那么支持max-age的瀏覽器會(huì)忽略expires的值，不支持max-age的瀏覽器會(huì)忽略max-age只支持expires

• 如果expires和max-age都不設(shè)置，該cookie會(huì)成為一個(gè)session cookie，即關(guān)閉瀏覽器的時(shí)候會(huì)被自動(dòng)刪除

secure和httpOnly

標(biāo)記為 Secure 的Cookie只應(yīng)通過(guò)被HTTPS協(xié)議加密過(guò)的請(qǐng)求發(fā)送給服務(wù)端。但即便設(shè)置了 Secure 標(biāo)記，敏感信息也不應(yīng)該通過(guò)Cookie傳輸，因?yàn)镃ookie有其固有的不安全性，Secure 標(biāo)記也無(wú)法提供確實(shí)的安全保障。從 Chrome 52 和 Firefox 52 開始，不安全的站點(diǎn)（http:）無(wú)法使用Cookie的 Secure 標(biāo)記

為避免跨域腳本 (XSS) 攻擊，通過(guò)JavaScript的 Document.cookie API無(wú)法訪問(wèn)帶有 HttpOnly 標(biāo)記的Cookie，它們只應(yīng)該發(fā)送給服務(wù)端。如果包含服務(wù)端 Session 信息的 Cookie 不想被客戶端 JavaScript 腳本調(diào)用，那么就應(yīng)該為其設(shè)置 HttpOnly 標(biāo)記。

如何設(shè)置cookie

服務(wù)端

服務(wù)端set-cookie即可

如下圖是GitHub的設(shè)置cookie

瀏覽器

直接在JavaScript里操作即可：

document.cookie="age=12; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=github.com; path=/";

如何修改cookie

修改一個(gè)cookie時(shí)，要保證name-domain-path一致，否則不會(huì)修改舊值，而是添加了一個(gè)新的 cookie。

如何刪除cookie

保證name-domain-path一致，并且把expires設(shè)置為一個(gè)過(guò)去的時(shí)間點(diǎn)

sessionStorage

使用

setItem(key, val);

getItem(key)

細(xì)節(jié)

• 只有設(shè)置sessionStorage的當(dāng)前域才能使用

• 只有頁(yè)面刷新才不會(huì)清除掉sessionStorage。剩下的均會(huì)清理掉sessionStorage（比如打開新的tab、關(guān)掉當(dāng)前tab再新開一個(gè)tab，更別提關(guān)閉瀏覽器了）

localStorage

使用

setItem(key, val);

getItem(key)

細(xì)節(jié)

• 只有設(shè)置localStorage的當(dāng)前域才能使用，但是新開的tab還可以使用且關(guān)閉瀏覽器重新打開還在

• 用戶不主動(dòng)刪除的話會(huì)一直存儲(chǔ)下去

• 大小為4M

• localStorage可以存儲(chǔ)k-v形式的數(shù)據(jù)。存儲(chǔ)的值需要是字符串類型，沒(méi)法直接存儲(chǔ)對(duì)象，但是可以將對(duì)象序列化為字符串再存入。如果強(qiáng)行存入object的話，就會(huì)被調(diào)用object.toString從而悲劇，正確的方法應(yīng)該是JSON.stringify
  

websql

Web SQL 數(shù)據(jù)庫(kù) API 并不是 HTML5 規(guī)范的一部分，但是它是一個(gè)獨(dú)立的規(guī)范，引入了一組使用 SQL 操作客戶端數(shù)據(jù)庫(kù)的 APIs。

使用

3個(gè)核心方法：

• openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫(kù)或者新建的數(shù)據(jù)庫(kù)創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)對(duì)象。

• transaction：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。

• executeSql：這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。

相關(guān)推薦：

HTML中元信息meta標(biāo)記屬性的分析（附代碼）

如何動(dòng)態(tài)生成html元素以及為元素追加屬性的方法介紹（附代碼）

以上就是關(guān)于http前端存儲(chǔ)的總結(jié)的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！