背景：?JavaScript是一種具有面向對象能力的、解釋型的程序設計語言。它的主要目的是，驗證發往服務器端的數據，增加Web互動，加強用戶體驗度等。強大的JavaScript和許多Web前端都有交互，下面就來介紹一下，增長見識的時刻又到了。 ### 一、JavaScript與Cookie 隨著Web越來越復雜，開發者急切的需要能夠本地化存儲的腳本功能。這個時候，第一個出現的方案：cookie誕生了。cookie的意圖是：在本地的客戶端的磁盤上以很小的文件形式保存數據。 cookie也叫 HTTPCookie，最初是客戶端與服務器端進行會話使用的。比如，會員登錄,下次回訪網站時無須登錄了；或者是購物車，購買的商品沒有及時付款，過兩天發現購物車里還有之前的商品列表。 HTTPCookie要求服務器對任意 HTTP請求發送 Set-Cookie，因此，Cookie的處理原則上需要在服務器環境下進行。當然，現在大部分瀏覽器在客戶端也能實現 Cookie的生成和獲取。(目前 Chrome不可以在客戶端操作，其他瀏覽器均可) cookie的組成：cookie由名/值對形式的文本組成： name=value。完整格式為：name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]，中括號是可選,name=value是必選。 https安全通信鏈接需要單獨配置。JavaScript設置、讀取和刪除并不是特別的直觀方便， 我們可以封裝成函數來方便調用。 ~~~ //創建cookie function setCookie(name,value,expires,path,domain,secure){ var cookieName=encodeURIComponent(name)+'='+encodeURIComponent(value); if(expires instanceof Date) { cookieName+=';expires='+expires; } if(path){ cookieName+=';path='+expires; } if(domain){ cookieName+=';domain='+domain; } if(secure){ cookieName+=';secure'; } document.cookie=cookieName; } //失效天數，直接傳一個天數即可 function setCookieDate(day) { var date = null; if (typeof day== 'number' && day> 0){ var date = new Date(); date.setDate(date.getDate() + day); } else { throw new Error('傳遞的day必須是一個天數，必須比0大'); } return date; } //今天是2015年12月6日，7天后此cookie過期 setCookie('user','何麗杰',setCookieDate(7)); setCookie('url','baidu.com',setCookieDate(7)); setCookie('email','helijie92902@163.com',setCookieDate(7)); ~~~    ~~~ //獲取cookie function getCookie(name){ var cookieName=encodeURIComponent(name)+'='; //cookieName得到user或者URL或者Email var cookieStart=document.cookie.indexOf(cookieName); //cookieStart得到三者中的未知，user是0，URL是34，Email是48，不存在是-1 var cookieValue=null; if(cookieStart>-1){ var cookieEnd = document.cookie.indexOf(';', cookieStart); //cookieEnd得到user的結尾是32，URL是46，Email是-1 if (cookieEnd == -1) { cookieEnd = document.cookie.length; //Email是74 } cookieValue=decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd)); //解碼 } return cookieValue; } //刪除 cookie function unsetCookie(name) { document.cookie = name +"= ; expires=" + newDate(0); } alert(getCookie('user')); alert(getCookie('url')); alert(getCookie('email')); ~~~    cookie雖然在持久保存客戶端用戶數據提供了方便， 分擔了服務器存儲的負擔。但是還有很多局限性的。 第一：每個特定的域名下最多生成 20個 cookie（根據不同的瀏覽器有所區別）。 1.IE6或更低版本最多 20個 cookie 2.IE7和之后的版本最多可以 50個 cookie。 IE7最初也只能 20個， 之后因被升級不定后增加了。 3.Firefox最多 50個 cookie 4.Opera最多 30個 cookie 5.Safari和 Chrome沒有做硬性限制。 PS：為了更好的兼容性，所以按照最低的要求來，也就是最多不得超過 20個 cookie。當超過指定的 cookie時，瀏覽器會清理掉早期的cookie。 IE和 Opera會清理近期最少使用的 cookie， Firefox會隨機清理cookie。 第二： cookie的最大大約為4096字節(4k)， 為了更好的兼容性， 一般不能超過4095字節即可。 第三： cookie存儲在客戶端的文本文件，所以特別重要和敏感的數據是不建議保存在cookie的。比如銀行卡號，用戶密碼等。 ### 二、JavaScript與XML 隨著互聯網的發展， Web應用程序的豐富，開發人員越來越希望能夠使用客戶端來操作XML技術。而XML技術一度成為存儲和傳輸結構化數據的標準。所以，本文探討一下JavaScript中使用 XML的技術。XML可以理解成一個微型的結構化的數據庫，保存一些小型數據用的。 在統一的正式規范出來以前， 瀏覽器對于 XML的解決方案各不相同。 DOM2級提出了動態創建 XMLDOM規范， DOM3進一步增強了 XMLDOM。所以，在不同的瀏覽器實現XML的處理是一件比較麻煩的事情。如果要實現跨瀏覽器就要思考幾個個問題： 1.load()只有IE、Firefox、Opera支持，所以無法跨瀏覽器； 2.獲取 XMLDOM對象順序問題，先判斷先進的DOM2的，然后再去判斷落后的IE；? 3.針對不同的IE和DOM2級要使用不同的序列化。 4.針對不同的報錯進行不同的報錯機制。 ~~~ //跨瀏覽器返回XML DOM對象 function getXMLDOM(xmlStr) { var xmlDom = null; if (typeof window.DOMParser != 'undefined') { //W3C xmlDom = (new DOMParser()).parseFromString(xmlStr, 'text/xml'); var errors = xmlDom.getElementsByTagName('parsererror'); if (errors.length > 0) { throw new Error('XML解析錯誤： ' + errors[0].firstChild.nodeValue); } } else if (typeof window.ActiveXObject != 'undefined') { //IE var version = [ 'MSXML2.DOMDocument.6.0', 'MSXML2.DOMDocument.3.0', 'MSXML2.DOMDocument' ]; for (var i = 0; i < version.length; i ++) { try { xmlDom = newActiveXObject(version[i]); } catch (e) { //跳過 } } //加載XML字符串 xmlDom.loadXML(xmlStr); if (xmlDom.parseError != 0) { throw new Error('XML解析錯誤： ' + xmlDom.parseError.reason); } } else { throw new Error('您所使用的系統或瀏覽器不支持 XMLDOM！ '); } return xmlDom; } //其次，必須跨瀏覽器序列化XML function serializerXML(xmlDom){ var xml=''; if(typeof XMLSerializer!='undefined'){ xml=(new XMLSerializer()).serializeToString(xmlDom); }else if(typeof xmlDom.xml!='undefined'){ xml=xmlDom.xml; }else{ throw newError('無法解析XML！ '); } return xml; } var xmlStr = '<root><user>helijie</user></root>'; var xmlDom = getXMLDOM(xmlStr); alert(serializerXML(xmlDom)); ~~~ 火狐 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE   PS：由于兼容性序列化過程有一定的差異，可能返回的結果字符串可能會有一些不同。至于load()加載XML文件則因為只有部分瀏覽器支持而無法跨瀏覽器. ### 三、學習心得 1、沒有獨立的軟件，要想占有不敗的地位就必須和外界進行聯系。相互聯系、溝通才能更好的適應社會。 2、跨瀏覽器兼容的軟件才是好的軟件。人才也是一樣，可以精通一門，但不可以只會一門。 3、每個開發軟件都有自己的長處和短處，取長補短才能打造出強大的軟件。合作共贏。