javascript - 基礎(chǔ)之cookie

javascript-cookie.jpg

1. Cookie是什么

Web瀏覽器和服務(wù)器通過HTTP協(xié)議進(jìn)行數(shù)據(jù)交流和通信,并且HTTP協(xié)議是無狀態(tài)(stateless)的協(xié)議,所謂HTTP無狀態(tài),總結(jié)大概就是如下4點(diǎn),

  • HTTP協(xié)議對(duì)于事務(wù)處理沒有記憶能力。
  • 對(duì)同一個(gè)url請(qǐng)求沒有上下文關(guān)系。
  • 每次的請(qǐng)求都是獨(dú)立的,它的執(zhí)行情況和結(jié)果與前面的請(qǐng)求和之后的請(qǐng)求是無直接關(guān)系的,它不會(huì)受前面的請(qǐng)求應(yīng)答情況直接影響,也不會(huì)直接影。
  • 服務(wù)器中沒有保存客戶端的狀態(tài),客戶端必須每次帶上自己的狀態(tài)去請(qǐng)求服務(wù)器。

很多商業(yè)新的網(wǎng)站都需要在不同頁(yè)面之間共享會(huì)話信息,例如在一個(gè)用戶完成注冊(cè)之后,在諸如下單和個(gè)人中心頁(yè)面,都需要用戶的登錄信息,而無狀態(tài)的HTTP協(xié)議無法達(dá)到這樣的要求。那么通過什么樣的技術(shù)才能在不同頁(yè)面之間共享用戶的會(huì)話信息呢?這就是cookie的用武之地了。

簡(jiǎn)單來說,cookie就是為了保存瀏覽器和服務(wù)器之間的會(huì)話狀態(tài),用以提升用戶體驗(yàn)的一個(gè)存儲(chǔ)介質(zhì)。說起來cookie真是一個(gè)很甜很萌的命名呢,也許正是因?yàn)閏ookie優(yōu)化了用戶體驗(yàn),像個(gè)小甜點(diǎn)一樣讓人開心吧。

2. Cookie工作原理

在瀏覽器和服務(wù)器通信時(shí),服務(wù)器以cookie的格式向用戶的瀏覽器發(fā)送一些數(shù)據(jù),如果瀏覽器可以接收cookie,它會(huì)將cookie以純文本(plain text record)的形式存儲(chǔ)在用戶的磁盤上?,F(xiàn)在,當(dāng)用戶訪問網(wǎng)站的另一個(gè)頁(yè)面的時(shí)候,瀏覽器會(huì)將相同的cookie發(fā)送給服務(wù)器用來取回相關(guān)信息。一旦服務(wù)器獲取到客戶端發(fā)送的cookie信息,服務(wù)器就會(huì)知道之前與該瀏覽器通信時(shí)存儲(chǔ)的什么內(nèi)容。

Cookie并不是什么復(fù)雜的概念,它是一串記錄了如下5個(gè)可變長(zhǎng)度字段的純文本,

  • Expires ? 失效期,表示cookie失效的日期。如果expires是空白,那么在用戶關(guān)閉瀏覽器的時(shí)候,該cookie就會(huì)失效。
  • Domain ? 域名
  • Path ? 路徑,存儲(chǔ)cookie的文件路徑或一個(gè)web頁(yè)面。一般來說推薦設(shè)置path為空,這樣你可以從任何路徑或頁(yè)面獲取到cookie。
  • Secure ? 安全,如果包含了secure,那么只能從安全的服務(wù)器獲取cookie;如果secure字段為空,則沒有上述限制。
  • Name=Value,cookie都是以鍵值對(duì)的形式進(jìn)行存儲(chǔ)和讀取的。

最初,cookie是為CGI編程而設(shè)計(jì)。cookie中包含的數(shù)據(jù)可以自動(dòng)地在web瀏覽器和web服務(wù)器之間傳播,所以服務(wù)器上的CGI腳本(scripts)可以對(duì)客戶端存儲(chǔ)的cookie進(jìn)行讀寫操作。

在javascript中,可以通過Document對(duì)象的cookie屬性來熟練地操作瀏覽器的cookie。javascript可以讀取、創(chuàng)建、修改和刪除應(yīng)用于當(dāng)前頁(yè)面的cookie內(nèi)容。

3. Cookie操作

與數(shù)據(jù)庫(kù)類似,cookie也有相關(guān)的增刪改查的操作,總結(jié)起來包括cookie的存儲(chǔ)、讀取、設(shè)置有效期以及刪除等,下面通過代碼逐個(gè)講解。

3.1 存儲(chǔ)cookie

創(chuàng)建cookie最簡(jiǎn)單的方式就是為document.cookie對(duì)象賦值一段字符串,如下代碼所示,

document.cookie = "key1=value1;key2=value2;expires=date";

在這里,expires屬性是可選的,如果你為expires屬性設(shè)置一個(gè)有效的日期或時(shí)間,那么該cookie將在給定的日期或時(shí)間之后失效,此后cookie的值就不能訪問了。

注意:cookie的值(value)不能包含逗號(hào),,分號(hào);空白符。因此,在存儲(chǔ)一個(gè)值到cookie之前,應(yīng)該先用javascript內(nèi)置的escape()函數(shù)對(duì)值的內(nèi)容進(jìn)行編碼;反過來,讀取cookie值的時(shí)候,應(yīng)該先用unescape()函數(shù)對(duì)cookie值進(jìn)行解碼。

存儲(chǔ)cookie的代碼如下所示,

<html>
    <head>
    <script type="text/javascript">
    function writeCookie() {
        if (document.myform.customer.value == "") {
            alert("Enter some value")
            return
        }
        cookieValue = escape(document.myform.customer.value) + ";"
        document.cookie = "name=" + cookieValue
        document.write("Setting Cookies : " + "name=" + cookieValue)
    }
    </script>
    </head>
    <body>
        <form name="myform" action="">
            Enter name: <input type="text" name="customer"/>
            <input type="button" value="Set Cookie" onclick="writeCookie()"/>
        </form>
    </body>
</html>

3.2 讀取cookie

讀取cookie就像存儲(chǔ)cookie一樣簡(jiǎn)單,因?yàn)閐ocument.cookie對(duì)象的值就是cookie。因此任何時(shí)候當(dāng)你想要獲取cookie的時(shí)候就可以使用document.cookie這個(gè)字符串。在document.cookie這個(gè)字符串中,它包含了一系列name=value這樣通過分號(hào);分隔的鍵值對(duì)。可以使用字符串string的split()方法將cookie字符串分割,獲取cookie的每一個(gè)name以及對(duì)應(yīng)的value。

獲取所有的cookie,如下代碼所示,

<html>
    <head>
        <script type="text/javascript">
            function readCookie() {
                var allCookies = document.cookie
                document.write("All cookies : " + allCookies)
                // get all the cookies pairs in an array
                cookieArray = allCookies.split(';')
                for (var i = 0; i < cookieArray.length; i++) {
                    name = cookieArray[i].split('=')[0]
                    value = cookieArray[i].split('=')[1]
                    document.write("Key is : " + name + " and Value is : " + value)
                }
            }
        </script>
    </head>
    <body>
        <form name="myform" action="">
            <p>click the following button and see the result:</p>
            <input type="button" value="Get Cookie" onclick="readCookie()"/>
        </form>
    </body>
</html>

3.3 設(shè)置cookie有效期

為了延長(zhǎng)當(dāng)前瀏覽器會(huì)話中的cookie的生命周期,可以通過expires屬性為cookie設(shè)置一個(gè)失效期,如下代碼所示,設(shè)置cookie的有效期為1個(gè)月,

<html>
    <head>
        <script>
            function writeCookie() {
                var now = new Date()
                now.setMonth(now.getMonth() + 1)
                cookieValue = escape(document.myform.customer.value) + ";"
                document.cookie = "name=" + cookieValue
                document.cookie = "expires=" + now.toUTCString() + ";"
                document.write("Setting Cookies : " + "name=" + cookieValue)
            }
        </script>
    </head>
    <body>
        <form name="myform" action="">
            Enter name: <inpu type="text" name="customer">
            <input type="button" value="Set Cookie" onclick="writeCookie()">
        </form>

    </body>
</html>

3.4 刪除cookie

如果將cookie刪除,那么后面的請(qǐng)求試圖訪問cookie將會(huì)得到空的字符串。為了刪除cookie,將cookie的失效期設(shè)置為一個(gè)過去的時(shí)間,如下代碼所示,設(shè)置了cookie的失效期為1個(gè)月之前,

<html>
   <head>
      <script type="text/javascript">
            function writeCookie() {
               var now = new Date();
               now.setMonth( now.getMonth() - 1 );
               cookieValue = escape(document.myform.customer.value) + ";"
               document.cookie="name=" + cookieValue
               document.cookie = "expires=" + now.toUTCString() + ";"
               document.write("Setting Cookies : " + "name=" + cookieValue)
            }
      </script>
   </head>
   <body>
      <form name="myform" action="">
         Enter name: <input type="text" name="customer"/>
         <input type="button" value="Set Cookie" onclick="wirteCookie()"/>
      </form>
   </body>
</html>

4. 小結(jié)

以上就是javascript中關(guān)于cookie的基本概念介紹和簡(jiǎn)單demo示范,讀者可以查閱更多資料了解更多關(guān)于cookie的知識(shí),如果有錯(cuò)誤或者不當(dāng)之處,還請(qǐng)讀者朋友指正。

5. 參考鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容