1. <bdo id="8zfej"></bdo>
    <li id="8zfej"><meter id="8zfej"><th id="8zfej"></th></meter></li>

    南京北大青鳥

    全國(guó)咨詢電話:15195455103

    三分鐘了解北大青鳥
    當(dāng)前位置:南京北大青鳥 > 學(xué)習(xí)園地 > 編程技巧

    JavaScript 操作 Cookie

    來(lái)源:張玉清? ? ? 作者:IT教育 ? ??

    cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí),就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值。 -w3school cookie 是訪問(wèn)過(guò)的網(wǎng)
         “cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量。每當(dāng)同一臺(tái)計(jì)算機(jī)通過(guò)瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí),就會(huì)發(fā)送這個(gè) cookie。你可以使用 JavaScript 來(lái)創(chuàng)建和取回 cookie 的值。” - w3school
      cookie 是訪問(wèn)過(guò)的網(wǎng)站創(chuàng)建的文件,用于存儲(chǔ)瀏覽信息,例如個(gè)人資料信息。
      從JavaScript的角度看,cookie 就是一些字符串信息。這些信息存放在客戶端的計(jì)算機(jī)中,用于客戶端計(jì)算機(jī)與服務(wù)器之間傳遞信息。
      在JavaScript中可以通過(guò) document.cookie 來(lái)讀取或設(shè)置這些信息。由于 cookie 多用在客戶端和服務(wù)端之間進(jìn)行通信,所以除了JavaScript以外,服務(wù)端的語(yǔ)言(如PHP)也可以存取 cookie。
     
      Cookie 基礎(chǔ)知識(shí)
    • cookie 是有大小限制的,每個(gè) cookie 所存放的數(shù)據(jù)不能超過(guò)4kb,如果 cookie 字符串的長(zhǎng)度超過(guò)4kb,則該屬性將返回空字符串。
    • 由于 cookie 終都是以文件形式存放在客戶端計(jì)算機(jī)中,所以查看和修改 cookie 都是很方便的,這就是為什么常說(shuō) cookie 不能存放重要信息的原因。
    • 每個(gè) cookie 的格式都是這樣的:<cookie名>=<值>;名稱和值都必須是合法的標(biāo)示符。
    • cookie 是存在 有效期的。在默認(rèn)情況下,一個(gè) cookie 的生命周期就是在瀏覽器關(guān)閉的時(shí)候結(jié)束。如果想要 cookie 能在瀏覽器關(guān)掉之后還可以使用,就必須要為該 cookie 設(shè)置有效期,也就是 cookie 的失效日期。
    • alert(typeof document.cookie)  結(jié)果是 string,曾經(jīng)我以為是array,還鬧過(guò)笑話...囧
    • cookie 有域和路徑這個(gè)概念。域就是domain的概念,因?yàn)闉g覽器是個(gè)注意安全的環(huán)境,所以不同的域 之間是不能互相訪問(wèn) cookie 的(當(dāng)然可以通過(guò)特殊設(shè)置的達(dá)到 cookie 跨域訪問(wèn))。路徑就是routing的概念,一個(gè)網(wǎng)頁(yè)所創(chuàng)建的 cookie 只能被與這個(gè)網(wǎng)頁(yè)在同一目錄或子目錄下得所有網(wǎng)頁(yè)訪問(wèn),而不能被其他目錄下得網(wǎng)頁(yè)訪問(wèn)(這句話有點(diǎn)繞,一會(huì)看個(gè)例子就好理解了)。
    • 其實(shí)創(chuàng)建cookie的方式和定義變量的方式有些相似,都需要使用 cookie 名稱和 cookie 值。同個(gè)網(wǎng)站可以創(chuàng)建多個(gè) cookie ,而多個(gè) cookie 可以存放在同一個(gè)cookie 文件中。
     
      Cookie常見問(wèn)題
    • cookie 存在兩種類型:
      • 你瀏覽的當(dāng)前網(wǎng)站本身設(shè)置的 cookie
      • 來(lái)自在網(wǎng)頁(yè)上嵌入廣告或圖片等其他域來(lái)源的 第三方 cookie (網(wǎng)站可通過(guò)使用這些 cookie 跟蹤你的使用信息)
    • 剛剛基礎(chǔ)知識(shí)里面有說(shuō)到 cookie 生命周期的問(wèn)題,其實(shí) cookie 大致可分為兩種狀態(tài):
      • 臨時(shí)性質(zhì)的cookie。當(dāng)前使用的過(guò)程中網(wǎng)站會(huì)儲(chǔ)存一些你的個(gè)人信息,當(dāng)瀏覽器關(guān)閉后這些信息也會(huì)從計(jì)算機(jī)中刪除
      • 設(shè)置失效時(shí)間的cookie。就算瀏覽器關(guān)閉了,這些信息業(yè)依然會(huì)在計(jì)算機(jī)中。如 登錄名稱和密碼,這樣無(wú)須在每次到特定站點(diǎn)時(shí)都進(jìn)行登錄。這種cookie 可在計(jì)算機(jī)中保留幾天、幾個(gè)月甚至幾年
    • cookie 有兩種清除方式:
    • 通過(guò)瀏覽器工具清除 cookie (有第三方的工具,瀏覽器自身也有這種功能)
    • 通過(guò)設(shè)置 cookie 的有效期來(lái)清除 cookie
    • 注:刪除 cookie 有時(shí)可能導(dǎo)致某些網(wǎng)頁(yè)無(wú)法正常運(yùn)行
    • 瀏覽器可以通過(guò)設(shè)置來(lái)接受和拒絕訪問(wèn) cookie。
    • 出于功能和性能的原因考慮,建議盡量降低 cookie 的使用數(shù)量,并且要盡量使用小 cookie。
    • 關(guān)于cookie編碼的細(xì)節(jié)問(wèn)題將會(huì)在cookie高級(jí)篇中單獨(dú)介紹。
    • 假如是本地磁盤中的頁(yè)面,chrome的控制臺(tái)是無(wú)法用JavaScript讀寫操作 cookie 的,解決辦法...換一個(gè)瀏覽器^_^。
     
      Cookie基礎(chǔ)用法
      一.簡(jiǎn)單的存取操作
      在使用JavaScript存取 cookie 時(shí),必須要使用Document對(duì)象的 cookie 屬性;一行代碼介紹如何創(chuàng)建和修改一個(gè) cookie :
      document.cookie  = 'username=Darren'
      以上代碼中'username'表示 cookie 名稱,'Darren'表示這個(gè)名稱對(duì)應(yīng)的值。假設(shè) cookie 名稱并不存在,那么就是創(chuàng)建一個(gè)新的 cookie;如果存在就是修改了這個(gè) cookie 名稱對(duì)應(yīng)的值。如果要多次創(chuàng)建 cookie ,重復(fù)使用這個(gè)方法即可。
     
      二.cookie的讀取操作
      要精確的對(duì) cookie 進(jìn)行讀取其實(shí)很簡(jiǎn)單,就是對(duì)字符串進(jìn)行操作。從w3school上copy這段代碼來(lái)做分析:

    function getCookie(c_name){
        if (document.cookie.length>0){  //先查詢cookie是否為空,為空就return ""
          c_start=document.cookie.indexOf(c_name + "=")  //通過(guò)String對(duì)象的indexOf()來(lái)檢查這個(gè)cookie是否存在,不存在就為 -1  
          if (c_start!=-1){
            c_start=c_start + c_name.length+1  //后這個(gè)+1其實(shí)就是表示"="號(hào)啦,這樣就獲取到了cookie值的開始位置
            c_end=document.cookie.indexOf(";",c_start)  //其實(shí)我剛看見indexOf()第二個(gè)參數(shù)的時(shí)候猛然有點(diǎn)暈,后來(lái)想起來(lái)表示指定的開始索引的位置...這句是為了得到值的結(jié)束位置。因?yàn)樾枰紤]是否是后一項(xiàng),所以通過(guò)";"號(hào)是否存在來(lái)判斷
            if (c_end==-1) c_end=document.cookie.length  
            return unescape(document.cookie.substring(c_start,c_end))  //通過(guò)substring()得到了值。想了解unescape()得先知道escape()是做什么的,都是很重要的基礎(chǔ),想了解的可以搜索下,在文章結(jié)尾處也會(huì)進(jìn)行講解cookie編碼細(xì)節(jié)
          }
        }
        return ""
      }  

      當(dāng)然想實(shí)現(xiàn)讀取cookie的方法還有不少,比如數(shù)組,正則等,這里就不往細(xì)說(shuō)了。
     
      三.設(shè)置cookie的有效期
      文章中常常出現(xiàn)的 cookie 的生命周期也就是有效期和失效期,即 cookie 的存在時(shí)間。在默認(rèn)的情況下,cookie 會(huì)在瀏覽器關(guān)閉的時(shí)候自動(dòng)清除,但是我們可以通過(guò)expires來(lái)設(shè)置 cookie 的有效期。語(yǔ)法如下:
      document.cookie = "name=value;expires=date"
      上面代碼中的date值為GMT(格林威治時(shí)間)格式的日期型字符串,生成方式如下:
      var _date = new Date();
      _date.setDate(_date.getDate()+30);
      _date.toGMTString();
      上面三行代碼分解為幾步來(lái)看:
    • 通過(guò)new生成一個(gè)Date的實(shí)例,得到當(dāng)前的時(shí)間;
    • getDate()方法得到當(dāng)前本地月份中的某一天,接著加上30就是我希望這個(gè)cookie能過(guò)在本地保存30天;
    • 接著通過(guò)setDate()方法來(lái)設(shè)置時(shí)間;
    • 后 用toGMTString()方法把Date對(duì)象轉(zhuǎn)換為字符串,并返回結(jié)果
      通過(guò)下面這個(gè)完整的函數(shù)來(lái)說(shuō)明在創(chuàng)建 cookie 的過(guò)程中我們需要注意的地方 - 從w3school復(fù)制下來(lái)的。創(chuàng)建一個(gè)在 cookie 中存儲(chǔ)信息的函數(shù):

    1  function setCookie(c_name, value, expiredays){
    2     var exdate=new Date();
    3     exdate.setDate(exdate.getDate() + expiredays);
    4     document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
    5   }
    6   使用方法:setCookie('username','Darren',30) 

      現(xiàn)在我們這個(gè)函數(shù)是按照天數(shù)來(lái)設(shè)置cookie的有效時(shí)間,如果想以其他單位(如:小時(shí))來(lái)設(shè)置,那么改變第三行代碼即可:
      exdate.setHours(exdate.getHours() + expiredays);
      這樣設(shè)置以后的cookie有效期就是按照小時(shí)為單位的。
      常見問(wèn)題中有提到清除 cookie 的兩種方法,現(xiàn)在要說(shuō)的是使 cookie 失效,通過(guò)把有效期的時(shí)間設(shè)置為一個(gè)已過(guò)期的時(shí)間。既然已經(jīng)有了設(shè)置有效期的方法,那么設(shè)置失效期的方法就請(qǐng)感興趣的朋友自己動(dòng)手了^_^。下面繼續(xù)比較深的cookie話題。
     
      Cookie 高級(jí)篇
      一.cookie 路徑概念
      在基礎(chǔ)知識(shí)中有提到 cookie 有域和路徑的概念,現(xiàn)在來(lái)介紹路徑在 cookie 中的作用。
      cookie 一般都是由于用戶訪問(wèn)頁(yè)面而被創(chuàng)建的,可是并不是只有在創(chuàng)建 cookie 的頁(yè)面才可以訪問(wèn)這個(gè) cookie。
      默認(rèn)情況下,只有與創(chuàng)建 cookie 的頁(yè)面在同一個(gè)目錄或子目錄下的網(wǎng)頁(yè)才可以訪問(wèn),這個(gè)是因?yàn)榘踩矫娴目紤],造成不是所有頁(yè)面都可以隨意訪問(wèn)其他頁(yè)面創(chuàng)建的 cookie。舉個(gè)例子:
      在 "http://www.cnblogs.com/Darren_code/" 這個(gè)頁(yè)面創(chuàng)建一個(gè)cookie,那么在"/Darren_code/"這個(gè)路徑下的頁(yè)面如: "http://www.cnblogs.com/Darren_code/archive/2011/11/07/Cookie.html"這個(gè)頁(yè)面默認(rèn)就能取到cookie信息。
      可在默認(rèn)情況下, "http://www.cnblogs.com"或者 "http://www.cnblogs.com/xxxx/" 就不可以訪問(wèn)這個(gè) cookie(光看沒(méi)用,實(shí)踐出真理^_^)。
      那么如何讓這個(gè) cookie 能被其他目錄或者父級(jí)的目錄訪問(wèn)類,通過(guò)設(shè)置 cookie 的路徑就可以實(shí)現(xiàn)。例子如下:
      document.cookie = "name=value;path=path"
      document.cookie = "name=value;expires=date;path=path"
       紅色字體path就是 cookie 的路徑,常用的例子就是讓 cookie 在跟目錄下,這樣不管是哪個(gè)子頁(yè)面創(chuàng)建的 cookie,所有的頁(yè)面都可以訪問(wèn)到了:
      document.cookie = "name=Darren;path=/"
       
      二.cookie 域概念
      路徑能解決在同一個(gè)域下訪問(wèn) cookie 的問(wèn)題,咱們接著說(shuō) cookie 實(shí)現(xiàn)同域之間訪問(wèn)的問(wèn)題。語(yǔ)法如下:
      document.cookie = "name=value;path=path;domain=domain"
      紅色的domain就是設(shè)置的 cookie 域的值。
      例如 "www.qq.com" 與 "sports.qq.com" 公用一個(gè)關(guān)聯(lián)的域名"qq.com",我們?nèi)绻胱?"sports.qq.com" 下的cookie被 "www.qq.com" 訪問(wèn),我們就需要用到 cookie 的domain屬性,并且需要把path屬性設(shè)置為 "/"。例:
      document.cookie = "username=Darren;path=/;domain=qq.com"
      注:一定的是同域之間的訪問(wèn),不能把domain的值設(shè)置成非主域的域名。
     
      三.cookie 安全性
      通常 cookie 信息都是使用HTTP連接傳遞數(shù)據(jù),這種傳遞方式很容易被查看,所以 cookie 存儲(chǔ)的信息容易被竊取。假如 cookie 中所傳遞的內(nèi)容比較重要,那么就要求使用加密的數(shù)據(jù)傳輸。
      所以 cookie 的這個(gè)屬性的名稱是“secure”,默認(rèn)的值為空。如果一個(gè) cookie 的屬性為secure,那么它與服務(wù)器之間就通過(guò)HTTPS或者其它安全協(xié)議傳遞數(shù)據(jù)。語(yǔ)法如下:
      document.cookie = "username=Darren;secure"
      把cookie設(shè)置為secure,只保證 cookie 與服務(wù)器之間的數(shù)據(jù)傳輸過(guò)程加密,而保存在本地的 cookie文件并不加密。如果想讓本地cookie也加密,得自己加密數(shù)據(jù)。
      注:就算設(shè)置了secure 屬性也并不代表他人不能看到你機(jī)器本地保存的 cookie 信息,所以說(shuō)到底,別把重要信息放cookie就對(duì)了,囧...
       
      四.cookie 編碼細(xì)節(jié)
      原本來(lái)想在常見問(wèn)題那段介紹cookie編碼的知識(shí),因?yàn)槿绻麑?duì)這個(gè)不了解的話編碼問(wèn)題確實(shí)是一個(gè)坑,所以還是詳細(xì)說(shuō)說(shuō)。
      在輸入cookie信息時(shí)不能包含空格,分號(hào),逗號(hào)等特殊符號(hào),而在一般情況下,cookie 信息的存儲(chǔ)都是采用未編碼的方式。所以,在設(shè)置 cookie 信息以前要先使用escape()函數(shù)將 cookie 值信息進(jìn)行編碼,在獲取到 cookie 值得時(shí)候再使用unescape()函數(shù)把值進(jìn)行轉(zhuǎn)換回來(lái)。如設(shè)置cookie時(shí):
      document.cookie = name + "="+ escape (value)
      再看看基礎(chǔ)用法時(shí)提到過(guò)的getCookie()內(nèi)的一句:
      return unescape(document.cookie.substring(c_start,c_end))
      這樣就不用擔(dān)心因?yàn)樵赾ookie值中出現(xiàn)了特殊符號(hào)而導(dǎo)致 cookie 信息出錯(cuò)了。
     
      總結(jié)
      在工作中越來(lái)越感覺(jué)到基礎(chǔ)的重要性了,有很多技術(shù)細(xì)節(jié)都是要懂不懂或者的懂的不多。
     

    分享到:
    近期文章

    搶試聽名額

    名額僅剩66名

    教育改變生活

    WE CHANGE LIVES

    主站蜘蛛池模板: 国产成人综合网在线观看| 国产综合在线观看| 精品亚洲综合久久中文字幕| 狠狠色综合久色aⅴ网站| 丁香五月亚洲综合深深爱| 日日AV色欲香天天综合网| 色先锋资源久久综合5566| 亚洲国产aⅴ综合网| 亚洲狠狠婷婷综合久久久久| 狠狠色伊人久久精品综合网| 久久婷婷五月综合97色| 久久婷婷成人综合色综合| 国产在线五月综合婷婷| 久久婷婷成人综合色综合| 亚洲综合精品香蕉久久网97| 国产天天综合永久精品日| 亚洲综合一区国产精品| 婷婷成人丁香五月综合激情| 五月天婷五月天综合网在线| 久久乐国产综合亚洲精品| 狠狠色丁香婷婷综合精品视频| 色五月五月丁香亚洲综合网| 亚洲综合欧美色五月俺也去| 奇米综合四色77777久久| 精品亚洲综合在线第一区| 久久九色综合九色99伊人| 亚洲色图综合在线| 欧美激情综合亚洲一二区| 青青草原综合久久大伊人精品| 色悠久久久久久久综合网| 久久婷婷是五月综合色狠狠| 狠狠色狠狠色综合日日五| 亚洲国产成人综合精品| 色五月丁香五月综合五月4438 | 亚洲综合成人婷婷五月网址| 久久久久综合网久久| 99精品国产综合久久久久五月天| 中文字幕亚洲综合久久菠萝蜜| 三级韩国一区久久二区综合| 一本色道久久综合狠狠躁篇| 亚洲国产成人久久综合碰|