Latest web development tutorials
×

JavaScript 教程

JavaScript 教程 JavaScript 簡介 JavaScript 用法 JavaScript 輸出 JavaScript 語法 JavaScript 語句 JavaScript 註釋 JavaScript 變量 JavaScript 數據類型 JavaScript 對象 JavaScript 函數 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 運算符 JavaScript 比較 JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript 類型轉換 JavaScript 正則表達式 JavaScript 錯誤 JavaScript 調試 JavaScript 變量提升 JavaScript 嚴格模式 JavaScript 使用誤區 JavaScript 表單驗證 JavaScript 保留關鍵字 JavaScript JSON JavaScript void JavaScript 代碼規範

JS 函數

JavaScript 函數定義 JavaScript 函數參數 JavaScript 函數調用 JavaScript 閉包

JS HTML DOM

DOM 簡介 DOM HTML DOM CSS DOM 事件 DOM EventListener DOM 元素

JS 高級教程

JavaScript 對象 JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp 對象

JS 瀏覽器 BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 彈窗 JavaScript 計時事件 JavaScript Cookies

JS 庫

JavaScript 庫 JavaScript 測試 jQuery JavaScript 測試 Prototype

JS 實例

JavaScript 實例 JavaScript 對象實例 JavaScript 瀏覽器對象實例 JavaScript HTML DOM 實例 JavaScript 總結

JS 參考手冊

JavaScript 對象 HTML DOM 對象

JavaScript Cookies


Cookies 用於存儲web 頁面的用戶信息。


什麼是Cookies?

Cookies 是一些數據, 存儲於你電腦上的文本文件中。

當web 服務器向瀏覽器發送web 頁面時,在連接關閉後,服務端不會記錄用戶的信息。

Cookies 的作用就是用於解決"如何記錄客戶端的用戶信息":

  • 當用戶訪問web 頁面時,他的名字可以記錄在cookie 中。
  • 在用戶下一次訪問該頁面時,可以在cookie 中讀取用戶訪問記錄。

Cookies 以名/值對形式存儲,如下所示:

username=John Doe

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


使用JavaScript 創建Cookie

JavaScript可以使用document.cookie屬性來創建、讀取、及刪除cookies。

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 中, 可以使用以下代碼來讀取cookies:

var x = document.cookie;

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


使用JavaScript 修改Cookie

在JavaScript 中,修改cookies 類似於創建cookies,如下所示:

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 的值。


Cookie 字符串

document.cookie 屬性看起來像一個普通的文本字符串,其實它不是。

即使您在document.cookie 中寫入一個完整的cookie 字符串, 當您重新讀取該cookie 信息時,cookie 信息是以名/值對的形式展示的。

如果您設置了新的cookie,舊的cookie 不會被覆蓋。 新cookie 將添加到document.cookie 中,所以如果您重新讀取document.cookie,您將獲得如下所示的數據:

cookie1=value; cookie2=value;

如果您需要查找一個指定cookie 值,您必須創建一個JavaScript 函數在cookie 字符串中查找cookie 值。


JavaScript Cookie 實例

在以下實例中,我們將創建cookie 來存儲訪問者名稱。

首先,訪問者訪問web 頁面, 他將被要求填寫自己的名字。 該名字會存儲在cookie 中。

訪問者下一次訪問頁面時,他會看到一個歡迎的消息。

在這個實例中我們會創建3 個JavaScript 函數:

  1. 設置cookie 值的函數
  2. 獲取cookie 值的函數
  3. 檢測cookie 值的函數

設置cookie 值的函數

首先,我們創建一個函數用於存儲訪問者的名字:

function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

函數解析:

以上的函數參數中,cookie 的名稱為cname,cookie 的值為cvalue,並設置了cookie 的過期時間expires。

該函數設置了cookie 名、cookie 值、cookie過期時間。


獲取cookie 值的函數

然後,我們創建一個函數用戶返回指定cookie 的值:

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
return "";
}

函數解析:

cookie 名的參數為cname。

創建一個文本變量用於檢索指定cookie :cname + "="。

使用分號來分割document.cookie 字符串,並將分割後的字符串數組賦值給ca (ca = document.cookie.split(';'))。

循環ca 數組(i=0;i<ca.length;i++),然後讀取數組中的每個值,並去除前後空格(c=ca[i].trim())。

如果找到cookie(c.indexOf(name) == 0),返回cookie 的值(c.substring(name.length,c.length)。

如果沒有找到cookie, 返回""。


檢測cookie 值的函數

最後,我們可以創建一個檢測cookie 是否創建的函數。

如果設置了cookie,將顯示一個問候信息。

如果沒有設置cookie,將會顯示一個彈窗用於詢問訪問者的名字,並調用setCookie 函數將訪問者的名字存儲365 天:

function checkCookie()
{
var username=getCookie("username");
if (username!="")
  {
  alert("Welcome again " + username);
  }
else
  {
  username = prompt("Please enter your name:","");
  if (username!="" && username!=null)
    {
    setCookie("username",username,365);
    }
  }
}


完整實例

實例

function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
  {
  var c = ca[i].trim();
  if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}

function checkCookie()
{
var user=getCookie("username");
if (user!="")
  {
  alert("Welcome again " + user);
  }
else
  {
  user = prompt("Please enter your name:","");
  if (user!="" && user!=null)
    {
    setCookie("username",user,365);
    }
  }
}

嘗試一下»

以下實例在頁面載入時執行checkCookie() 函數。