JavaScript Cookie

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

什么是Cookie？

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

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

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

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

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

username = Seagull

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

使用JavaScript创建Cookie

在JavaScript中，您可以使用属性创建，读取和删除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稍微复杂一点，因为该属性仅返回一个包含分号和所有cookie的空格分隔列表的字符串（例如，名称=值对，例如cookie1 = value; cookie2 = value; cookie3 = value）。为了从此列表中获取单个cookie，您需要使用方法将其分成单个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个属性的纯文本数据记录：