cookie入門 cookie入門

cookie入門

據我對cookie誕生背景的瞭解，cookie是由網景公司建立的，目的就是將用戶的數據儲存在客戶端上。伴隨的HTML5的出現，如今又有另一個解決數據離線儲存的方案，就是HTML5中的Web storage，其中兩個重要對象sessionStorage和localStorage能夠解決瀏覽器sessions和長期儲存數據的目的，而且兼容性還不錯，IE8+以上瀏覽器都支持。

那咱們直接學習Web storage不就能夠了？我的認爲，這不是一個很好的學習方法。Web Storage的出現主要仍是由於cookie的一些小毛病不可以知足前端工程師平常開發而被加入到HTML5中做爲新的API的。本質上說，localStorage和sessionStorage實現的本質與cookie是同樣的。因此在接觸以前，先熟悉而且掌握cookie對於Web storage的學習還有很大的幫助。

這篇文章會涉及的內容與技術：

• module bundler：webpack
• javascirpt如何實現讀取，寫入，刪除Cookie
• js-cookie實現讀取，寫入，刪除Cookie

cookie定義

cookie其實就是服務器保存在瀏覽器的一小段文本信息。怎麼保存呢？瀏覽器在向服務器發送一個http請求時，會在發送請求的首部字段中添加Cookie字段，而且附上相應的key，value。服務器接收到請求而且正確返回響應的時候，會在響應的頭部字段中添加Set-cookie字段。這時候就完成了一次數據儲存的操做。當咱們關閉瀏覽器而且再次打開的時候，相應須要存儲的信息就會在expires指定的期限內存儲下來。

簡單的說，就是：

• 當用戶訪問web頁面時，他的記錄能夠保存在cookie中。
• 在用戶下一次訪問同一頁面時，能夠在cookie中讀取用戶的訪問記錄。

cookie特色

• 每一個cookie的大小不能超過4KB。
• 經過HTTP協議的方式來存儲數據。
• cookie會影響同一域名下的根目錄及其子目錄。舉例來講，若是當前URI是keithchou.github.io，若是設置path爲'/'或者不設置（默認值爲/），這個cookie對該域名的根路徑和它的全部子路徑都有效。若是path設置爲/music，那麼這個cookie只有在訪問keithchou.github/music及其子路徑纔有效。
• 同源政策。瀏覽器的同源政策規定，兩個網址只要域名和端口相同，就能夠共享cookie。注意，這裏不要求協議相同。也就是說，'http://keithchou.com'設置的cookie，能夠被'https://keithchou.com'讀取。

cookie屬性

cookie經常使用的屬性有：

• value
• domain
• path
• expires
• secure
• HttpOnly

屬性的具體內容就再也不贅述了，屬性都比較簡單。

cookie實現

接下來想說說兩種方式來實現cookie。一是原生javascript實現cookie，二是經過js-cookie這個小框架來實現cookie。

javascript實現數據存儲

基本的cookie操做有三種：讀取、寫入和刪除。javascript操做cookie主要是經過document.cookie來實現的。

document.cookie的一大特色是，能夠讀取全部的Cookie，可是每次寫入cookie的時候只能一條一條寫入。看一個從百度獲取的cookie。

//讀取cookie，一次性獲取全部cookie。 console.log(document.cookie); //每一個cookie都是以鍵值對的形式存在，而且經過；分隔。 "BAIDUID=9BD404162B2978E266B82B0D052A12D7:FG=1; BIDUPSID=605A0EB7E85170299BCFFF6C2B042840; PSTM=1474937533; BD_UPN=13314752; ispeed_lsm=6; BDRCVFR[Fc9oatPmwxn]=G01CoNuskzfuh-zuyuEXAPCpy49QhP8; BD_HOME=0; H_PS_PSSID=1440_21421_18240_21116_21454_21377_21526_21191_21399; BD_CK_SAM=1; PSINO=7; H_PS_645EC=9c44kg7jUnDfYs5vfqg9n3QbElgAvuf8phS5ZsmD2FIE2KxSARX534GRQw1z7f0cZ6wu; locale=zh; pgv_pvi=4703388672; pgv_si=s5301332992" //寫入cookie，只能一條一條寫入。 document.cookie = 'unclekeith=21'; document.cookie = 'sex=boy'; ...

原生javascript實現cookie的方法以下。此代碼摘自《javascript高級程序設計 第三版》。

var CookieUtil = { //讀取cookie，判斷某個cookie是否存在。 //讀取操做配合 unclekeith=21; sex=boy 這個cookie會更好理解讀取cookie的操做。 get: function (name){ var cookieName = encodeURIComponent(name) + "=", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if (cookieStart > -1){ var cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1){ cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); } return cookieValue; }, //寫入cookie。 set: function (name, value, expires, path, domain, secure) { var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); if (expires instanceof Date) { cookieText += "; expires=" + expires.toGMTString(); } if (path) { cookieText += "; path=" + path; } if (domain) { cookieText += "; domain=" + domain; } if (secure) { cookieText += "; secure"; } document.cookie = cookieText; }, //刪除cookie unset: function (name, path, domain, secure){ this.set(name, "", new Date(0), path, domain, secure); } }; 

javascript實現cookie的代碼並不複雜，只要有javascript基礎，基本上均可以看懂。給出原生javascript實現cookie的操做是由於要去實際的瞭解一下整個過程，否則使用前端大牛封裝好的庫來實現cookie總感受有一些東西特別難以理解。

js-cookie

首先我想說的是，網上大量的資料都是對$.cookie進行介紹的。官網明確指出這個項目已經再也不繼續維護了。爲何還要使用阿？因此再也不介紹。這裏要介紹另一個實現cookie的庫。js-cookie。具體的api在官網上有詳細的介紹。傳送門：js-cookie

首先，進入本地項目，經過cnpm安裝js-cookie。

cnpm install js-cookie --save

而後，在使用webpack中的入口文件entry.js引入js-cookie。

import Cookies from 'js-cookie';

固然，接下來就能夠使用了。下面是一個登陸界面的小demo。

html部分
<p>
    <label for="username">用戶名：</label> <input type="text" id='username' name='username' placeholder="請輸入用戶名"> </p> <p> <label for="password">密碼：</label> <input type="password" id='password' name='password' placeholder="請輸入密碼"> </p> <p> <label for="confirm_password">再次輸入密碼：</label> <input type="password" id='confirm_password' name='confirm_password' placeholder="再次輸入密碼"> <input type="checkbox" id='rememberUser'> <label for="rememberUser">記住用戶名</label> </p> //js部分 //先判斷瀏覽器是否儲存有對應的cookie。 if (Cookies.get('username')) { $("#username").val(Cookies.get('username')); $('#rememberUser').attr('checked',true); }; if (Cookies.get('password')) { $('#password').val(Cookies.get('password')); $('#confirm_password').val(Cookies.get('password')); } //設置cookie。當點擊 記住用戶名 操做時儲存相應的數據。 $('#rememberUser').click(function(){ if (this.checked) { if ($('#username').val() ==='') { alert('請輸入用戶名'); this.checked = false; } else { Cookies.set('username',$('#username').val(),{ path:'/', expires: 1 }); Cookies.set('password',$('#password').val(),{ path:'/', expires: 1 }) } } });
轉發自：http://www.cnblogs.com/Uncle-Keith/