使用JavaScript操做cookies
1、什麼是cookies？html
cookies是一種對客戶端硬盤的數據進行存取的技術，這種技術可以讓網站把少許的數據存儲到客戶端的硬盤，同時也可以從客戶端的硬盤讀取存儲的數據。存儲的方式表現爲一個很小的文本文件，這個文件能夠存儲的東西不少，好比：用戶名、訪問時間、密碼等。數組
2、使用cookies瀏覽器
一、cookies的建立安全
document.cookies = name+"="+value;
cookies的建立須要給出cookies的名稱和對應的cookies值，必備屬性是cookies的名稱name，除此以外，cookies還有四個另外的可選屬性，分別是：expires屬性、path屬性、domain屬性、secure屬性。服務器
二、給cookies命名cookie
name屬性是用來惟一表示cookies的，cookies的name屬性能夠自定義。與其餘屬性不一樣，document對象的cookies屬性賦值時，並不會替代原來的值，而是會建立新的cookies。dom
eg：性能
1 document.cookies = "user=Tom";2 document.cookies = "city=nanjing";3 document.cookies = "age=20";
上面的三條語句，建立了三個cookies。建立多個cookies時能夠用一條語句，中間用分號隔開便可。學習
由於cookies是經過HTTP來傳遞的，而HTTP不容許某個非字母和數字的字符被傳遞，所以cookies不能包含分號等特殊字符。爲了解決這個問題，能夠採用對cookies的名稱和值在賦值前進行編碼的方法。在JavaScript中，經常使用的編碼方法是escape(),爲了在讀取的時候解碼，相對應的一個解碼方法是unescape().例如：網站
document.cookies = escape("user=Tom;city=nanjing;age=20");
三、定義cookies過時時間（expires屬性）
（1）cookies是有生命週期的，爲了可以讓一個cookies可以在關閉瀏覽器後還能持續生效，就須要使用expires屬性。expires須要使用格林尼治標準時間的文本字符串，格式以下：
Weekday Mon DD HH:MM:SS Time Zone YYYY
eg:
Mon Oct 22 13:22:34 PST 2012
（2）爲了更好的控制時間，一般使用JavaScript的Date對象來進行時間的設置（這裏就不列舉Date對象的經常使用方法了，以前的學習中有詳細的資料）
eg：
1 <script language="JavaScript">2 var edate = new Date();3 document.cookies = escape("user=Tom;expire="+edate.setFullYear(edate.getFullYear()+1));4 </script>
以上代碼，設置了過時時間爲當前時間加一年。要想讓一個cookies刪除，一般也是使用expires屬性設置爲過去的某一個時間便可。例如：
1 <script language="JavaScript">2 var edate = new Date();3 document.cookies = escape("user=Tom;expire="+edate.setFullYear(edate.getFullYear()-1));4 </script>
四、定義cookies的目錄範圍（path屬性）
和變量的做用域同樣，cookies同樣有着本身的做用範圍。path屬性能使cookies可以被服務器上指定目錄下的全部網站訪問。
eg：cookies可以被服務器裏www目錄及其子目錄下的任何網頁訪問到：
document.cookies = "user=Tom;path=/www";
若是cookies 可以被服務器上全部網頁訪問：
document.cookies = "user=Tom;path=/";
五、實現跨服務器共享（domain屬性）
domain屬性可以實現跨服務器的共享。好比對於某個網站的主站www.ds5u.com是一臺服務器，可是其論壇站bbs.ds5u.com又是另外一個服務器，博客站blog.ds5u.com又是另外一臺服務器。雖然這些網站都有各自的二級域名，可是用戶是同一的，須要實現cookies的共享。例如：
document.cookies = "user=Tom;domain=.ds5u.com";
上述代碼便可實現cookies在ds5u.com這個域所在的全部服務器共享。
六、使信息傳輸更加安全（secure屬性）
secure屬性規定cookies只能在安全的Internet上鍊接。一般狀況下，此屬性是忽略的，屬性的可選值是true和false。
eg：
document.cookies = "user=Tom;secure=true";
3、讓cookies存儲信息
cookies 自己的使用是有限制的，在用戶的計算機上，每一個服務器或域只能保存最多20個cookies，而每一個瀏覽器的cookies總數不能超過300，cookies的最大尺寸的4k，所以不能像使用變量同樣，隨意的建立cookies。考慮到cookies的限制，最有效的方法是將全部須要保存到cookies中的值連接爲一個字串（使用分隔符分隔），而後把這個字串賦值給一個cookies。這樣，只須要建立一個cookies，就能保存若干的信息了。讀取時，按照分隔符的組合規則進行信息的提取和還原。
語法：
名稱1=值1&名稱2=值2&...&名稱n=值n
eg：若是要保存姓名、年齡、性別、城市、郵編這五個消息，先將消息組合成一個字串：
user=Tom&age=25&sex=male&city=nanjing&zip=210000
而後建立一個cookies，由於字串中包含非字母和數字字符，所以在賦值前先進行編碼：
document.cookie = "allinfo="+escape("user=Tom&age=25&sex=male&city=nanjing&zip=210000");
4、從cookies讀取信息
建立cookies後，讀取cookies信息直接訪問屬性便可：
document.cookie
document.cookie一般須要用unescape()方法進行解碼，eg：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 <script language="JavaScript"> 7 document.cookie = escape("user=Tom;city=nanjing;zip=21000"); 8 alert("cookies的值："+unescape(document.cookie)); 9 </script> 10 </head>11 12 <body>13 14 </body>15 </html>
效果：
在這裏獲得的值是一個用分號分隔的字符串。能夠經過String對象來得到每一個cookies對應的值。eg：
*split():將字符串按照指定的分隔符分紅數組。
*substring(starting index,ending index):提取從starting index開始到ending index結束的文本。
*indexOf(text,index):返回text參數內的第一個字符在字符串的位置。
eg：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>讀取cookies</title> 6 </head> 7 <script language="JavaScript"> 8 <!-- 9 document.cookie = escape("username=tom;city=nanjing;zip=210000");10 var allCookies = unescape(document.cookie);11 var aryCookies = allCookies.split(";");12 var nowvalue;13 for( var i=0; i < aryCookies.length; i++ ){14 nowvalue = aryCookies[i];15 if( nowvalue.substring( 0, nowvalue.indexOf("=") ) == "zip" ){16 document.write("cookies中保存的郵編是："+nowvalue.substring( nowvalue.indexOf("=")+1, nowvalue.length));17 alert("cookies中保存的郵編是："+nowvalue.substring( nowvalue.indexOf("=")+1, nowvalue.length));18 break;19 }20 }21 //-->22 </script>23 24 25 <body>26 </body>27 </html>
效果：（只能在IE中顯示）
5、實踐
eg：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>JS</title> 6 <script language="JavaScript"> 7 function getCookie(c_name) { 8 if (document.cookie.length>0) {
9 c_start=document.cookie.indexOf(c_name + "=")10 if (c_start!=-1) {
11 c_start=c_start + c_name.length+1 12 c_end=document.cookie.indexOf(";",c_start)13 if (c_end==-1) c_end=document.cookie.length14 return unescape(document.cookie.substring(c_start,c_end))15 }
16 }17 return ""18 }19 20 function setCookie(c_name,value,expiredays) {21 var exdate=new Date()22 exdate.setDate(exdate.getDate()+expiredays)23 document.cookie=c_name+ "=" +escape(value)+24 ((expiredays==null) ? "" : "; expires="+exdate.toGMTString())25 }26 27 function checkCookie() {28 username=getCookie('username')29 if (username!=null && username!="") {30 alert('Welcome again '+username+'!')}31 else {32 username=prompt('Please enter your name:',"")33 if (username!=null && username!="") {34 setCookie('username',username,365)35 }36 }37 }38 </script> 39 </head>40 41 <body onLoad="checkCookie()">42 43 </body>44 </html>
效果：
- 1. javascript 操做cookies詳解
- 2. 使用vue-cookies操做cookie
- 3. AngularJs Cookies 操做
- 4. JS操做Cookies
- 5. Js 操做 Cookies
- 6. Django 中使用 js 操做 cookies
- 7. javascript的date操做使用
- 8. js 操做 cookies 學習
- 9. selenium webdriver (10) -- 操做cookies
- 10. JavaScript Cookies
- 更多相關文章...
- • ASP Cookies - ASP 教程
- • JavaScript 指南 - 網站建設指南
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
-
每一个你不满意的现在，都有一个你没有努力的曾经。