JavaScript基础教程

JavaScript 对象

JavaScript 函数

JS HTML DOM

JS 浏览器BOM

AJAX 基础教程

JavaScript 参考手册

JavaScript Cookie

Cookies使您可以将信息存储在用户的Web浏览器中。

什么是Cookie?

Cookie是一个小型文本文件,可让您在用户计算机上存储少量数据(近4KB)。

Web服务器将网页发送到浏览器后,连接将关闭,并且服务器会忘记有关用户的所有信息。

发明了Cookies来解决“如何记住有关用户的信息”的问题。

Cookies可用于跟踪信息,例如用户喜好,当用户下次访问网站时,网站可以检索该信息以个性化页面。

Cookies以“名称=值”对的形式保存,例如:

username = Seagull

当浏览器从服务器请求网页时,属于该页面的cookie被添加到请求中。这样,服务器将获得必要的数据以“记住”有关用户的信息。

注意:请勿在Cookie中存储敏感数据,例如密码或信用卡信息,因为恶意用户可能会操纵它们。

使用JavaScript创建Cookie

在JavaScript中,您可以使用document.cookie属性创建,读取和删除Cookie 。

可以这样创建一个cookie:

  document.cookie = "username=Seagull";

您还可以添加到期日期(以UTC时间为单位)。默认情况下,关闭浏览器时会删除cookie:

  document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC";

使用path参数,您可以告诉浏览器cookie属于哪个路径。默认情况下,cookie属于当前页面:

  document.cookie = "username=Seagull; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

使用JavaScript读取Cookie

在JavaScript中,可以这样读取cookie:

  var x = document.cookie;

读取cookie稍微复杂一点,因为该document.cookie属性仅返回一个包含分号和所有cookie的空格分隔列表的字符串(例如,名称=值对,例如cookie1 = value; cookie2 = value; cookie3 = value)。为了从此列表中获取单个cookie,您需要使用split()方法将其分成单个name = value对,并搜索特定名称。

此字符串不包含属性,如expires,path,domain,等,可能已经为Cookie集。

使用JavaScript更改Cookie

改变或修改一个cookie的唯一方法是创建一个具有相同的另一种饼干name和path为现有的。

  document.cookie = "username=Ankit; expires=Mon, 25 Mar 2019 12:00:00 UTC; path=/";

注意:创建具有相同name但不同的cookie path不会更改现有的cookie,而是会添加一个额外的cookie。

使用JavaScript删除Cookie

删除Cookie非常容易。删除Cookie:

  • 只需再次使用相同的设置name,指定一个空值

  • 或将expires参数设置为经过的日期

  document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

请记住,如果您path为cookie 指定了或其他属性,则在删除它时还需要包括它们。

JavaScript Cookie示例

在下面的示例中,我们将创建一个存储用户名的cookie。

用户首次访问该网页时,将要求他/她填写其姓名。然后将该名称存储在cookie中。

下次用户访问同一页面时,他/她将获得存储在cookie中的值。

对于示例,我们将创建2个JavaScript函数:

  • 设置cookie值的功能

  • 获取Cookie值的函数

储存cookie

首先,我们创建一个将访问者的姓名存储在cookie变量中的函数。

function setCookie(cname, cvalue) {
  var now = new Date();
  now.setMonth(now.getMonth() + 1);
  var expires = "expires="+ now.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
测试看看‹/›

功能说明:

上面函数的参数是cookie的名称(cname)和cookie的值(cvalue)。

该函数通过将cookie名称,cookie值和expires字符串(1个月)加在一起来设置cookie。

读取cookie

然后,我们创建一个显示指定cookie值的函数。

function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');

  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
        document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);
     }
  }
}
测试看看‹/›

函数说明:

此函数将cookie名称作为参数(cname)。

获取所有cookie(allcookies = document.cookie)。

将分号上的document.cookie拆分为名为cookieArr的数组(cookieArr = allcookies.split(';'))。

遍历cookieArr数组(i = 0; i <cookieArr.length; i ++),并读出每个值(cookiePair = cookieArr [i])。

如果找到了cookie(cname == cookiePair [0]),则写入cookie的键和值(cookiePair [0],cookiePair [1])。

合在一起

function setCookie(cname, cvalue) {
  var now = new Date();
  now.setMonth(now.getMonth() + 1);
  var expires = "expires="+ now.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var allcookies = document.cookie;
  cookieArr = allcookies.split(';');
  for(var i = 0; i < cookieArr.length; i++) {
     var cookiePair = cookieArr[i].split("=");
     if(cname == cookiePair[0].trim()) {
           document.write ("Key is: " + cookiePair[0] + " and Value is: " + cookiePair[1]);
     }
  }
}
测试看看‹/›

Cookies属性

Cookies是具有5个属性的纯文本数据记录:

属性描述
Name=ValueCookies以键值对的形式设置和检索
ExpiresCookie到期的日期。如果为空,则cookie将在访问者退出浏览器时过期
Domain您网站的域名
Path设置cookie的目录或网页的路径。如果要从任何目录或页面检索cookie,则该字段可以为空白
Secure如果此字段包含单词“ secure”,则只能使用安全服务器检索cookie。如果此字段为空,则不存在此类限制