成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

【前端工程師手冊(cè)】總結(jié)一下前端存儲(chǔ)

array_huang / 1186人閱讀

摘要：如果不指定，默認(rèn)為當(dāng)前文檔的主機(jī)不包含子域名。標(biāo)識(shí)指定了主機(jī)下的哪些路徑可以接受該路徑必須存在于請(qǐng)求中。具體的使用參考教程和類似，但是可以直接使用來(lái)操作，具體的參看參考聊一聊前端存儲(chǔ)那些事兒聊一聊

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ǔ)的值需要是字符串類型，沒法直接存儲(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 查詢。



具體的使用參考教程

indexdb

和websql類似，但是可以直接使用JavaScript來(lái)操作，具體的參看MDN-indexdb

參考：

MDN-cookie

聊一聊前端存儲(chǔ)那些事兒

聊一聊 cookie

http cookie

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108112.html

相關(guān)文章

  • 【前端工程師手冊(cè)】說(shuō)清楚JavaScript中的相等性判斷

    摘要：如果沒有傳入的話如果是類型，則取否則，取這個(gè)方法大致和一樣，除了以下返回返回參考知乎中和區(qū)別是什么全面解析中的數(shù)據(jù)類型與類型轉(zhuǎn)換規(guī)范 有哪些判斷相等性的方法 JavaScript現(xiàn)在提供了三種方法來(lái)判斷相等性： ===，三個(gè)等號(hào)即嚴(yán)格相等 ==，兩個(gè)等號(hào)即寬松相等 Object.is()，ES6中用來(lái)判斷相等的方法 判斷相等性的細(xì)節(jié) ===（嚴(yán)格相等） 被比較的兩個(gè)數(shù)不會(huì)進(jìn)行類型轉(zhuǎn)...

    crossoverJie 評(píng)論0 收藏0

  • 【前端工程師手冊(cè)】前端應(yīng)該知道的各種寬高

    摘要：和都是相對(duì)于內(nèi)邊距邊界的。和即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性 引子 曾經(jīng)校招面試的時(shí)候，學(xué)習(xí)了三個(gè)月前端的我去某廠面試，面試官循循善誘考察了一個(gè)開發(fā)中的實(shí)際場(chǎng)景，其中有需要用到某元素的高度，面試官問(wèn)我clientHeight和offsetHeight的區(qū)別是什么，我當(dāng)時(shí)一臉懵逼，這個(gè)問(wèn)題對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)已經(jīng)完全超綱了...面試結(jié)果自然是面試官感謝我來(lái)...

    jayce 評(píng)論0 收藏0

  • 【前端工程師手冊(cè)】前端應(yīng)該知道的各種寬高

    摘要：和都是相對(duì)于內(nèi)邊距邊界的。和即為向上滾動(dòng)時(shí)，元素內(nèi)容區(qū)被遮住的那一部分。同理參考中的各種寬高屬性 引子 曾經(jīng)校招面試的時(shí)候，學(xué)習(xí)了三個(gè)月前端的我去某廠面試，面試官循循善誘考察了一個(gè)開發(fā)中的實(shí)際場(chǎng)景，其中有需要用到某元素的高度，面試官問(wèn)我clientHeight和offsetHeight的區(qū)別是什么，我當(dāng)時(shí)一臉懵逼，這個(gè)問(wèn)題對(duì)于當(dāng)時(shí)的我來(lái)說(shuō)已經(jīng)完全超綱了...面試結(jié)果自然是面試官感謝我來(lái)...

    Hujiawei 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • 【前端工程師手冊(cè)】布局

    摘要：今天總結(jié)一下布局，之前校招面試的時(shí)候貌似很喜歡考布局，例如兩欄自適應(yīng)布局三欄自適應(yīng)布局等等，實(shí)現(xiàn)的方法多種多樣，總結(jié)一下以后就不亂了。脫離文檔流觸發(fā)使用脫離文檔流之后，我們?cè)倮脜^(qū)域不會(huì)與浮動(dòng)元素重疊的特性來(lái)使剩下的元素自適應(yīng)。 今天總結(jié)一下布局，之前校招面試的時(shí)候貌似很喜歡考布局，例如兩欄自適應(yīng)布局、三欄自適應(yīng)布局等等，實(shí)現(xiàn)的方法多種多樣，總結(jié)一下以后就不亂了。 兩欄布局 這里我們講...

    maxmin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<