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