據(jù)我對(duì)cookie誕生背景的了解，cookie是由網(wǎng)景公司創(chuàng)建的，目的就是將用戶的數(shù)據(jù)儲(chǔ)存在客戶端上。伴隨的HTML5的出現(xiàn)，現(xiàn)在又有另外一個(gè)解決數(shù)據(jù)離線儲(chǔ)存的方案，就是HTML5中的Web storage，其中兩個(gè)重要對(duì)象sessionStorage和localStorage可以解決瀏覽器sessions和長(zhǎng)期儲(chǔ)存數(shù)據(jù)的目的，并且兼容性還不錯(cuò)，IE8+以上瀏覽器都支持。
那我們直接學(xué)習(xí)Web storage不就可以了？個(gè)人認(rèn)為，這不是一個(gè)很好的學(xué)習(xí)方法。Web Storage的出現(xiàn)主要還是因?yàn)閏ookie的一些小毛病不能夠滿足前端工程師日常開發(fā)而被加入到HTML5中作為新的API的。本質(zhì)上說(shuō)，localStorage和sessionStorage實(shí)現(xiàn)的本質(zhì)與cookie是一樣的。所以在接觸之前，先熟悉并且掌握cookie對(duì)于Web storage的學(xué)習(xí)還有很大的幫助。
這篇文章會(huì)涉及的內(nèi)容與技術(shù)：
- module bundler：webpack
- javascirpt如何實(shí)現(xiàn)讀取，寫入，刪除Cookie
- js-cookie實(shí)現(xiàn)讀取，寫入，刪除Cookie
cookie定義
cookie其實(shí)就是服務(wù)器保存在瀏覽器的一小段文本信息。怎么保存呢？瀏覽器在向服務(wù)器發(fā)送一個(gè)http請(qǐng)求時(shí)，會(huì)在發(fā)送請(qǐng)求的首部字段中添加Cookie字段，并且附上相應(yīng)的key，value。服務(wù)器接收到請(qǐng)求并且正確返回響應(yīng)的時(shí)候，會(huì)在響應(yīng)的頭部字段中添加Set-cookie字段。這時(shí)候就完成了一次數(shù)據(jù)儲(chǔ)存的操作。當(dāng)我們關(guān)閉瀏覽器并且再次打開的時(shí)候，相應(yīng)需要存儲(chǔ)的信息就會(huì)在expires指定的期限內(nèi)存儲(chǔ)下來(lái)。
簡(jiǎn)單的說(shuō)，就是：
- 當(dāng)用戶訪問(wèn)web頁(yè)面時(shí)，他的記錄可以保存在cookie中。
- 在用戶下一次訪問(wèn)同一頁(yè)面時(shí)，可以在cookie中讀取用戶的訪問(wèn)記錄。
cookie特點(diǎn)
- 每個(gè)cookie的大小不能超過(guò)4KB。
- 通過(guò)HTTP協(xié)議的方式來(lái)存儲(chǔ)數(shù)據(jù)。
- cookie會(huì)影響同一域名下的根目錄及其子目錄。舉例來(lái)說(shuō)，如果當(dāng)前URI是keithchou.github.io，如果設(shè)置path為'/'或者不設(shè)置（默認(rèn)值為/），這個(gè)cookie對(duì)該域名的根路徑和它的所有子路徑都有效。如果path設(shè)置為/music，那么這個(gè)cookie只有在訪問(wèn)keithchou.github/music及其子路徑才有效。
- 同源政策。瀏覽器的同源政策規(guī)定，兩個(gè)網(wǎng)址只要域名和端口相同，就可以共享cookie。注意，這里不要求協(xié)議相同。也就是說(shuō)，'http://keithchou.com'設(shè)置的cookie，可以被'https://keithchou.com'讀取。
cookie屬性
cookie常用的屬性有：
- value
- domain
- path
- expires
- secure
- HttpOnly
屬性的具體內(nèi)容就不再贅述了，屬性都比較簡(jiǎn)單。
cookie實(shí)現(xiàn)
接下來(lái)想說(shuō)說(shuō)兩種方式來(lái)實(shí)現(xiàn)cookie。一是原生javascript實(shí)現(xiàn)cookie，二是通過(guò)js-cookie這個(gè)小框架來(lái)實(shí)現(xiàn)cookie。
javascript實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)
基本的cookie操作有三種：讀取、寫入和刪除。javascript操作cookie主要是通過(guò)document.cookie來(lái)實(shí)現(xiàn)的。
document.cookie的一大特點(diǎn)是，可以讀取所有的Cookie，但是每次寫入cookie的時(shí)候只能一條一條寫入。看一個(gè)從百度獲取的cookie。
延伸閱讀
- ssh框架
2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖
2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe
2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】
2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞
2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention
2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明
2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解
2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析
2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二)
2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式