JavaScript Cookie(9/19)

Cookie 是一些數據, 存儲于你電腦上的文本文件中。
當 web 服務器向瀏覽器發送 web 頁面時,在連接關閉后,服務端不會記錄用戶的信息。
Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":
當用戶訪問 web 頁面時,他的名字可以記錄在 cookie 中。
在用戶下一次訪問該頁面時,可以在 cookie 中讀取用戶訪問記錄。
Cookie 以名/值對形式存儲,如下所示:

username=John Doe

當瀏覽器從服務器上請求 web 頁面時, 屬于該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息

使用 JavaScript 創建Cookie

JavaScript 可以使用 document.cookie 屬性來創建 、讀取、及刪除 cookie。
JavaScript 中,創建 cookie 如下所示:

document.cookie="username=John Doe";

您還可以為 cookie 添加一個過期時間(以 UTC 或 GMT 時間)。默認情況下,cookie 在瀏覽器關閉時刪除:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 參數告訴瀏覽器 cookie 的路徑。默認情況下,cookie 屬于當前頁面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來讀取 cookie:

var x = document.cookie;

document.cookie 將以字符串的方式返回所有的 cookie,類型格式: cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie

在 JavaScript 中,修改 cookie 類似于創建 cookie,如下所示:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

舊的 cookie 將被覆蓋

使用 JavaScript 刪除 Cookie

刪除 cookie 非常簡單。您只需要設置 expires 參數為以前的時間即可,如下所示,設置為 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意,當您刪除時不必指定 cookie 的值

實例
<html>
<head>
  <script type="text/javascript">
    function getCookie(c_name)
    {
      if (document.cookie.length>0)
      {
        c_start=document.cookie.indexOf(c_name + "=")
        if (c_start!=-1)
        { 
          c_start=c_start + c_name.length+1 
          c_end=document.cookie.indexOf(";",c_start)
          if (c_end==-1) c_end=document.cookie.length
            return unescape(document.cookie.substring(c_start,c_end))
        } 
      }
      return ""
    }

    function setCookie(c_name,value,expiredays)
    {
      var exdate=new Date()
      exdate.setDate(exdate.getDate()+expiredays)
      document.cookie=c_name+ "=" +escape(value)+
      ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    }

    function checkCookie()
    {
      username=getCookie('username')
      if (username!=null && username!="")
        {alert('Welcome again '+username+'!')}
      else 
      {
        username=prompt('Please enter your name:',"")
        if (username!=null && username!="")
        {
          setCookie('username',username,365)
        }
      }
    }
  </script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

在輸入cookie信息時不能包含空格,分號,逗號等特殊符號,而在一般情況下,cookie 信息的存儲都是采用未編碼的方式。所以,在設置 cookie 信息以前要先使用escape()函數將 cookie 值信息進行編碼,在獲取到 cookie 值得時候再使用unescape()函數把值進行轉換回來。如設置cookie時:

document.cookie = name + "="+ escape (value)
return unescape(document.cookie.substring(c_start,c_end))

這樣就不用擔心因為在cookie值中出現了特殊符號而導致 cookie 信息出錯了。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容